我需要通过相对于相对 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 导入组件？提前致谢!
最佳答案
您从 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)
关于javascript - 如何通过完整 URL 异步导入 VueJS 中的组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47985362/