上下文

Question

上下文

我必须创建一个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不够熟练，无法知道我想做什么与之相关。

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_01&utm_medium=email&utm_term=0_ae2f1465e2-a23e0b1135-209131157

摘录：

// 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,
  },
  // ...
}

Answer 2

您也许可以使用ajax ...

var xhr = new XMLHttpRequest;

xhr.open('GET', '[Your url here]', true)

但是我不确定，因为您说过要从另一台服务器导入

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

上下文

我的想法

2 个答案: