Vue.js - 是不是可以使用 Javascript 动态导入从另一台服务器加载组件？

Posted 2023-02-22

【中文标题】Vue.js - 是不是可以使用 Javascript 动态导入从另一台服务器加载组件？

【英文标题】：Vue.js - Is it possible to use Javascript Dynamic Imports to load components from another server?Vue.js - 是否可以使用 Javascript 动态导入从另一台服务器加载组件？

【发布时间】：2019-07-12 19:13:13

【问题描述】：

上下文

我必须创建一个 Vue.js 应用程序作为我的 REST API 后端的 UI。 它将为每个客户显示。

此应用程序显示要处理的项目列表（带有一个小工作流程：打开、进行中、完成）。

我的一些客户为此列表请求特定且不同的视图：例如，他们希望列表以另一种布局显示，或者包含来自其内部应用程序的额外数据。

我的想法

所以，我必须为这些客户端创建特定的 Vue.js 组件，但我不想用这些客户端的所有组件“污染”我的主应用程序代码库。 我希望在专门的代码库中处理这些视图。

我想知道是否可以根据使用应用程序的客户端使用动态导入/异步组件（Article on optimization with Dynamic imports 和Official Vue.js doc for Dynamic imports）来加载这些组件。 这些组件将从另一台服务器加载，而不是服务于主要 Vue.js 应用程序的服务器。

---

动态加载组件的实际方式是：

'my-component': () => import('./my-async-component')

有没有可能做这样的事情：

'my-component': () => import('http://myspecificclient.mydomain.com/my-async-component')

---

我了解动态加载与 Webpack 尤其相关，这可能是一个问题，但我对 Webpack 的熟练程度不高，不知道我想做的事情是否相关。

【问题讨论】：

看起来是：developers.google.com/web/fundamentals/primers/modulesimport shout from 'https://simple.example/modules/lib.mjs';

有趣的是，我知道您可以从另一台服务器加载 javascript 函数和对象。尽管就我而言，我想更进一步：我想加载 Vue.js 组件（在“.vue”文件中定义）。这些文件通常由 Webpack 处理以将它们转换为包和块。是否可以直接加载一个 Vue.js 组件，该组件本身可能依赖于特定服务器上的子组件？

您是否尝试过使用 async component 以这种方式加载 vue 文件？尝试从本地 Web 服务器获取文件（如果您想快速测试，请使用 http-server）

我需要一些指导才能做到这一点...... vue 组件由 webpack 编译成块，我不知道我应该在我的 url 中定位什么（ import('?? ??') ) 如果是可以在 Web 服务器上直接访问的 javascript 文件 ".js" 会更容易，但事实并非如此 :-/

使用这个语法：vuejs.org/v2/guide/…，如果你使用完整的 http URL 而不是相对路径会发生什么？您可能必须使用函数而不是直接使用 import 语句

【参考方案1】：

Markus Oberlehner 最近的这篇文章（2019 年 4 月 7 日）介绍了一种方法：

https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/?utm_source=Vue.js+Developers&utm_campaign=a23e0b1135-EMAIL_CAMPAIGN_2019_04_02_10_08_COPY_01&utm_medium=email&utm_term=0_ae2f1465e2-a23e0b1135-209131157

摘录：

// This does not work.
const MyComponent = () => import('https://distribution.server/MyComponent.js');

理想情况下，我们可以按照您在上面看到的方式进行。但这不起作用，因为 webpack 和 import() 的原生实现都不能处理外部资源。

在下面的示例代码 sn-p 中，您可以看到我们自己的 import() 实现，它确实适用于外部资源。

// src/utils/external-component.js
export default function externalComponent(url) 
  return new Promise((resolve, reject) => 
    const name = url.split('/').reverse()[0].match(/^(.*?)\.umd/)[1];
    const script = document.createElement('script');
    script.async = true;
    script.addEventListener('load', () => 
      resolve(window[name]);
    );
    script.addEventListener('error', () => 
      reject(new Error(`Error loading $url`));
    );
    script.src = url;
    document.head.appendChild(script);
  );

import externalComponent from '../utils/external-component';

const MyComponent = () => externalComponent('http://localhost:8200/MyComponent/MyComponent.c9c0abb8e999d0e5654e.umd.min.js');

export default 
  name: 'MyOtherComponent',
  components: 
    MyComponent,
  ,
  // ...

【参考方案2】：

你也许可以使用 ajax...

var xhr = new XMLHttpRequest;

xhr.open('GET', '[Your url here]', true)

但我不太确定，因为你说你想从另一台服务器导入它