Vue动态完全加载组件

Question

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

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

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

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

补充: 我想尝试类似于VueJS动态组件的东西，但请求URL必须动态设置。

- Giacomo Voß

---

我看到的问题是前端解释原始的.vue文件意味着前端必须解释该Vue文件包括less、scss、pug和任何其他模板语言所使用的任何模板语法。我认为你仍然希望后端解释文件，但前端消耗Vue组件的纯JSON定义。这就是Webpack在幕后执行的操作。 - zero298

我可以自由地扩展后端，因此在后端编译pug、sass等是可能的。但是一个Vue组件的纯JSON定义会是什么样子，特别是方法和computedProps呢？ - Giacomo Voß

Answer 1

Markus Oberlehner 有一篇文章，我认为可以解决您的问题。解决方案是通过一个externalComponent(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() 类似的方式加载外部组件。

- Jason S

Answer 2

您可以尝试使用http-vue-loader来解决问题。虽然不建议在生产环境中使用，但是根据您的使用情况，它可能是适合的。显然，会存在一些限制（例如导入其他模块）。

- Stephen Thomas

---

如何在运行时使用http-vue-loader注册组件？GitHub页面上的所有示例也都在“new Vue（）”构造函数中预先定义了组件。 - Giacomo Voß

仍然不知道原因...我包含了 Vue.component("Test", httpVueLoader("http://localhost/Test.vue"))，但是没有任何反应。没有XHR请求，控制台上也没有任何输出。我在TypeScript方面做错了吗？我用 require("../node_modules/..:") 导入了 Vue 和 httpVueLoader。 - Giacomo Voß