来自不同项目/域的 webpack 和 vue 异步组件

Question

我是 webpack 的新手，我已经看过一些教程并在我的项目中获得了一个有效的配置。

我尝试用这种方式异步加载vuejs组件：

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

webpack编译后得到三个文件：

• app.js
• 0.js
• index.html

这是我想要的结果，因为这将是一个小部件，所以只有一个js文件包含（app.js），它在执行过程中调用0.js，当app.js被包含在索引中时效果很好同一主机上的.html页面

但是，如果我想包含来自其他主机的 app.js 文件，我该怎么做？

例如，如果我有包含 app.js 脚本的 mywebsite.com/index.html

<!--https://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 文件前面加上承载文件的服务器的网址？

Answer 1

当然，这就是发明 publicPath (https://webpack.js.org/guides/public-path/) 的原因。您可以在构建时设置它，或者更方便地在运行时设置 - 只需分配 window.webpack_public_path = 'https://my_widget_host.com/';

问候。