ScriptExternalLoadError：加载脚本失败。 vue-cli@5.0.0-rc.0答案

【问题标题】：ScriptExternalLoadError: Loading script failed. vue-cli@5.0.0-rc.0ScriptExternalLoadError：加载脚本失败。 vue-cli@5.0.0-rc.0
【发布时间】：2021-12-20 06:32:57
【问题描述】：

我们正在尝试使用来自 Webpack 5.61.0 的 ModuleFederationPlugin 的微前端。我感到很无助。我正在使用@vue/cli@5.0.0-rc.0。暴露其模块的vue.config.js 如下所示，

const ModuleFederationPlugin =  require("webpack/lib/container/ModuleFederationPlugin");
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  publicPath: "http://localhost:8080/",
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: "items",
        filename: "remoteEntry.js",
        exposes: {
          "./ItemsBase": "./src/components/ItemsBase.vue"
        },
        shared: require("./package.json").dependencies
      })
    ]
  },
  transpileDependencies: [
    'vuetify'
  ]
})

而消费者的vue.config.js看起来像这样，

const ModuleFederationPlugin =  require("webpack/lib/container/ModuleFederationPlugin");
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  publicPath: "http://localhost:8081/",
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: "my_shop",
        filename: "remoteEntry.js",
        remotes: {
          "items": "items@http://localhost:8080/remoteEntry.js"
        },
        shared: require("./package.json").dependencies
      })
    ]
  },
  transpileDependencies: [
    'vuetify'
  ]
})

我在两个项目中都有bootstrap.js，我正在像import('./bootstrap') 一样从main.js 导入它在消费者项目中，我们正尝试像这样导入远程组件。

<template>
  <div class="home">
    <ItemsBase></ItemsBase>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'HomeView',
  components: {
    ItemsBase: () => import("items/ItemsBase")
  }
}
</script>

这种组合基于带有 vue-cli 的 webpack 示例：https://github.com/module-federation/module-federation-examples/tree/master/vue-cli

唯一的区别是他们使用vue-cli@5.0.0-beta.3，但两者都有相同的 webpack 版本（我的原型和 webpack 示例）。

现在有趣的是，我在消费者项目中遇到了以下错误。

ScriptExternalLoadError: Loading script failed

有什么想法吗？

编辑： 另一个区别是 webpack 的 vue-cli 示例使用的是 yarn 而我使用的是 npm，这无关紧要，但认为可能值得一提，因为他们的示例 works！！！

编辑： 该问题正在github上关注

https://github.com/vuejs/vue-cli/issues/6823

【问题讨论】：

标签： webpack vuejs2 webpack-module-federation

【解决方案1】：

我知道为什么会这样了。我在 github 上的 vue-cli 上打开了一个问题。 https://github.com/vuejs/vue-cli/issues/6823

周六 (06.11) vue-cli@5.0.0-rc.0 在 npm 上发布并且与 npm 一起使用，我无法再次为任何 vue-cli 版本创建新的 vue 应用程序。因为它在 package.json 中添加了每个包的 5.0.0 版本，显然它们在 npm 中不存在，但它适用于 yarn。我无法让模块联合与 vue-cli@5.0.0-rc.0 一起使用，但正如 vue-cli 的 webpack 示例中所使用的那样，我可以让它与 vue-cli@5.0.0-beta-3 一起使用。

【讨论】：

【解决方案2】：

我遇到了同样的问题，并让它与vue-cli@5.0.0-rc.0 一起工作。我所做的是在像这样加载 MF 之前删除 splitChunks：

config.optimization.delete('splitChunks');

【讨论】：

嗯，谢谢。我会试试这个。 config 是 vue-cli@5.0.0-rc.0 中需要的这个新实例，对吗？
好的，我检查过了，它起作用了。我在configureWebpack -> optimization -> splitChunks: false下添加了splitChunks