来自不同项目/域的 webpack 和 vue 异步组件 [英] webpack and vue async component from different project / domain
问题描述
我对 webpack 还很陌生，我已经看过一些教程并在我的项目中获得了工作配置.
我尝试以这种方式异步加载 vuejs 组件:
<div id="应用程序"><组件:is="模板"></组件></模板><脚本>导出默认{name: '应用程序',计算:{模板 () {返回 () =>导入(`@/templates/${this.$template.name}`)}},挂载(){this.template().then(comp => {this.$nextTick(() => {//...})})}}
webpack 编译后得到三个文件:
- app.js
- 0.js
- index.html
这是我想要的结果，因为这将是一个小部件，所以只包含一个 js 文件(app.js)，它在执行过程中调用 0.js，当 app.js 包含在索引中时它运行良好.html 同一主机上的页面
但是如果我想包含来自其他主机的 app.js 文件，我该怎么做?
例如，如果我有包含 app.js 脚本的 mywebsite.com/index.html
<script src="https://my_widget_host.com/app.js"></script>我在尝试获取 0.js 文件时收到 404 错误，因为调用位于 http://mywebsite.com/0.js 而不是 http://my_widget_host.com/0.js
有没有办法在 0.js 文件前面加上托管文件的服务器的 url?
当然，这就是为什么 publicPath (https://webpack.js.org/guides/public-path/) 被发明.您可以在构建时或更方便地在运行时设置它 - 只需分配窗口.webpack_public_path = 'https://my_widget_host.com/';
问候.
I'm pretty new on webpack, I already watch some tutorials and get a working configuration on my project.
I try to load vuejs components asynchronously in this way:
<template>
<div id="app">
<component
:is="template"
>
</component>
</div>
</template>
<script>
export default {
name: 'App',
computed: {
template () {
return () => import(`@/templates/${this.$template.name}`)
}
},
mounted () {
this.template().then(comp => {
this.$nextTick(() => {
//...
})
})
}
}
</script>
After webpack compilation, I get three files:
- app.js
- 0.js
- index.html
this is the result I want, because this will be a widget, so just one js file inclusion (app.js) which calls 0.js during its execution, and it works well when app.js is included on the index.html page on the same host
But how can I do if I want to include app.js file from another host?
For example if I have mywebsite.com/index.html which includes app.js script
<!--https://mywebsite.com/index.html-->
<script src="https://my_widget_host.com/app.js"></script>
I get a 404 error when it tries to get the 0.js file, because the calls is on http://mywebsite.com/0.js and not on http://my_widget_host.com/0.js
Is there a way to prefix 0.js file with the url of the server which hosts the file?
Sure, that's why publicPath (https://webpack.js.org/guides/public-path/) was invented. You can set it on build time, or more conveniently on run-time - just assign window.webpack_public_path = 'https://my_widget_host.com/';
Regards.
这篇关于来自不同项目/域的 webpack 和 vue 异步组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
