@vue/cli@5.0.0-rc.0使用ModuleFederationPlugin出现ScriptExternalLoadError错误

1. 基础资源可访问性排查 #

• 直接在浏览器访问http://localhost:8080/remoteEntry.js，确认文件可正常下载：
  • 如果返回404，先检查远程应用实际启动端口是否为8080，是否存在端口占用导致启动时自动漂移到其他端口
  • 检查远程应用打包后的dist目录，确认remoteEntry.js文件存在，可尝试将远程应用的publicPath改为'auto'适配动态路径

2. 跨域配置修正 #

端口不同的本地服务属于跨域场景，需要在远程应用的vue.config.js中新增devServer跨域放行配置：

module.exports = defineConfig({
  // 原有配置保留
  devServer: {
    port: 8080,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  }
})

3. vue-cli 5 RC版本兼容处理 #

@vue/cli@5.0.0-rc.0默认开启的代码拆分逻辑会破坏Module Federation的依赖加载逻辑，需要在两个项目的configureWebpack中关闭默认代码拆分：

configureWebpack: {
  optimization: {
    splitChunks: false
  },
  plugins: [/* 原有ModuleFederationPlugin配置保留 */]
}

4. shared配置优化 #

直接全量导入package.json的dependencies作为shared容易引发版本冲突、单例异常问题，建议仅指定核心共享依赖并开启单例配置：

// 两个项目的MF插件配置中替换原有shared字段
shared: {
  vue: {
    singleton: true,
    requiredVersion: require('./package.json').dependencies.vue
  },
  vuetify: {
    singleton: true,
    requiredVersion: require('./package.json').dependencies.vuetify
  }
}

5. 远程资源动态加载适配 #

避免remoteEntry加载时机早于共享依赖初始化的问题，可将消费端的远程资源改为手动动态加载，不需要在MF插件中配置remotes字段：

// 消费端bootstrap.js中新增加载逻辑
const loadRemoteModule = async () => {
  // 先加载远程remoteEntry脚本
  await new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = 'http://localhost:8080/remoteEntry.js'
    script.onload = resolve
    script.onerror = reject
    document.head.appendChild(script)
  })
  // 初始化共享作用域
  await __webpack_init_sharing__('default')
  const container = window.items
  await container.init(__webpack_share_scopes__.default)
  // 获取远程组件
  const factory = await window.items.get('./ItemsBase')
  return factory()
}

// 组件中引入时改为调用上述方法
components: {
  ItemsBase: () => loadRemoteModule()
}

6. 依赖一致性校验 #

删除两个项目的node_modules、package-lock.json文件，重新执行npm install安装依赖，或切换为yarn安装，避免rc版本依赖的小版本差异导致功能异常。

内容的提问来源于stack exchange，提问作者Farhad Nowzari