如何通过完整 URL 在 VueJS 中异步导入组件

Question

我需要通过与相对 URL 相对的完整 URL 异步导入 Vue 组件。以下来自VueJS 文档的示例适用于同一项目中的组件

Vue.component(
  'app-component-one',
  () => import('./component-from-app-one')
)

但是，我的目标是从部署在同一服务器上的单独项目中导入组件。我希望我可以使用完整的 URL 并执行类似...

Vue.component(
  'app-component-two',
   () => import ('http://sample-domain.com/project-2/components/component-from-app-two.vue')
)

但它会导致错误：

This dependency was not found:
* http://sample-domain.com/app-2/components/component-from-app-two.vue in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/SampleComponent.vue

是否可以通过完整 URL 导入组件？提前致谢！

Answer 1

您从 Vue 网站引用的示例正在利用WebPack 的代码分割功能，因此无法加载不属于同一项目的文件。

您尝试做的事情通常称为“动态/异步 ES6 模块加载”。不要太深入它..但当前import blah from X仅支持静态导入。如果你更关心这方面的细节..有一个关于 JS 动态导入的 TC39 提案

与此同时……我们凡人必须依赖像SystemJS这样的工具，它会完全满足您的要求。

但就像 @divine 提到的......你需要某种类型的构建过程来生成独立的 Vue 组件。您可以使用 WebPack 或 RollUp 将其导出为 UMD，并使用 SystemJS 通过引用完整 URL 来导入该组件（您甚至可以从不同的域导入它！假设该域支持 CORS）