如何通过完整 URL 异步导入 VueJS 中的组件答案

【问题标题】：How to asynchronously import components in VueJS by full URL如何通过完整 URL 异步导入 VueJS 中的组件
【发布时间】：2018-06-07 16:42:34
【问题描述】：

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

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 导入组件？提前致谢！

【问题讨论】：

不应该http:sample-domain.com 是http://sample-domain.com？
@AsaStallard 是的，你是对的。我在上面的问题中解决了这个问题。谢谢
如果你想异步导入组件，你可以使用 vue-router 中的延迟加载功能。在您提到的问题中，好像您需要使用不同的 URL 进行访问。在这种情况下，您需要有两个单独的 vuejs 构建文件才能完成这项工作。

标签： javascript vue.js vuejs2 vue-component webpack-2

【解决方案1】：

您从 Vue 网站引用的示例使用了 code-splitting functionality from WebPack，因此无法加载不属于同一项目的文件。

您尝试执行的操作通常称为“动态/异步 ES6 模块加载”。不要太深入。但当前的import blah from X 仅支持静态导入。如果你更关心这个细节……有一个TC39 proposal for dynamic imports in JS

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

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

【讨论】：

莫里斯，webpack 现在支持 import() 你能更新你的答案吗？
@ydennis - 好电话。这周我会做一个测试，以确保新的 webpack import() 函数可以跨域工作。