Question

我认为这是一个非常不寻常的用例，我并不是在谈论动态要求使用webpack的组件。

我希望能够将“应用程序”作为Vue组件部署在完全不同的后端上，以便后端可以通过API返回完整的.vue文件。后端的结构无关紧要。因此，我需要在Vue应用程序中实现以下目标的方法：

用户单击前端Vue应用程序中的“应用程序”名称
“ app”名称是在后端异步请求的
后端返回一个.vue SFC文件，其中包含HTML，JS和CSS
frontend将文件编译为具有模板和功能的Vue组件
frontend将组件插入视图中，并且该组件可以与应用程序的其余部分（Vuex存储等）进行交互

我发现v-runtime-template似乎是模板的解决方案。但这不包括JS部分，对吗？

其他： 我想我正在尝试类似VueJS Dynamic Components的方法，但是必须动态设置请求URL。

Answer 1

您可能会使用http-vue-loader。通常不建议在生产中使用它，但是您的用例可能会使它适合。显然会有一些限制（例如import设置其他模块）

Answer 2

我认为是您的问题的

Markus Oberlehner has an article。解决方案是通过externalimport（url）函数代替import（）函数。我在这里复制了Markus的函数以方便参考：

// src/utils/external-component.js
export default async function externalComponent(url) {
  const name = url.split('/').reverse()[0].match(/^(.*?)\.umd/)[1];

  if (window[name]) return window[name];

  window[name] = new Promise((resolve, reject) => {
    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);
  });

  return window[name];
}

根据本文所述，您可以使用externalComponent（）帮助程序函数来加载外部组件，与使用import（）所使用的方法几乎相同。

Vue加载组件_completely_动态

2 个答案: