javascript - 来自不同项目/域的 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 文件该怎么办？

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

<!--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 文件中添加托管该文件的服务器的 URL 前缀？

Answer 1

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

问候。