Question

我需要通过与相对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导入组件？提前谢谢！

Answer 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）

如何通过完整URL

1 个答案: