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

Question

语境

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

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

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

我的点子

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

我在想，如果我可以使用动态进口/异步组件（条带动态优化进口和官方Vue.js DOC动态进口）加载这些组件，基于使用的应用程序在客户端上。这些组件将从另一台服务器加载，而不是从为主 Vue.js 应用程序提供服务的服务器加载。

---

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

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

是否有可能做这样的事情：

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

---

我知道动态加载特别与 Webpack 相关，这可能是这里的一个问题，但我在 Webpack 方面不够熟练，无法知道我想做的事情是否相关。

Answer 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_10_08_COPY_10_08_COPY_1008_COPY_1008_COPY_1008_COPY_1008_COPY_1008_COPY_021b30e16e18e16e201a1b3e_16e_16e_16e_16e_16e_16e_16e1a1e25e15e3a

摘录：

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

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

在下面的示例代码片段中，您可以看到我们自己的 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,
  },
  // ...
}