Vue 2 与 Webpack 模块联合

Question

我正在使用 Vue 2，我正在使用 vue cli 4 创建两个新项目。我正在选择从 cli 创建项目的默认选项。我在两个项目中都创建了一个 vue.config.js 文件，并插入了以下代码。宿主项目：

 const ModuleFederationPlugin =
   require("webpack").container.ModuleFederationPlugin;

 module.exports = {
   publicPath: "http://localhost:8001/",
   configureWebpack: {
     plugins: [
       new ModuleFederationPlugin({
         name: "consumer",
         filename: "remoteEntry.js",
         remotes: {
           host: "host@http://localhost:8000/remoteEntry.js",
         },
       }),
     ],
   },
   devServer: {
     port: 8001,
   },
 };

远程项目：

 const ModuleFederationPlugin =
   require("webpack").container.ModuleFederationPlugin;

 module.exports = {
   publicPath: "http://localhost:8000/",
   configureWebpack: {
     plugins: [
       new ModuleFederationPlugin({
         name: "host",
         filename: "remoteEntry.js",
         exposes: {
           "./HelloWorld": "./src/components/HelloWorld",
         },
       }),
     ],
   },
   devServer: {
     port: 8000,
   },
 };

我的 package.json 文件是这样的：

{
  "name": "rep1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "webpack": "^5.51.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

当我尝试使用 npm 构建项目时出现以下错误。

 ERROR  TypeError: Cannot read property 'includes' of undefined
TypeError: Cannot read property 'includes' of undefined
    at ModuleFederationPlugin.apply (/Users/georgex/Documents/rep1/node_modules/webpack/lib/container/ModuleFederationPlugin.js:52:49)
    at webpack (/Users/georgex/Documents/rep1/node_modules/@vue/cli-service/node_modules/webpack/lib/webpack.js:51:13)
    at serve (/Users/georgex/Documents/rep1/node_modules/@vue/cli-service/lib/commands/serve.js:163:22)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rep1@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the rep1@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/georgex/.npm/_logs/2021-08-19T12_15_48_053Z-debug.log

Answer 1

请将您的 Vue CLI 版本更新为 5.x.x，因为 @vue/cli-service 版本 4.x.x 中的 Webpack 版本为 4.x.x。

"@vue/babel-preset-app": "5.0.0-beta.2",
"@vue/cli-plugin-babel": "5.0.0-beta.2",
"@vue/cli-plugin-eslint": "5.0.0-beta.2",
"@vue/cli-service": "5.0.0-beta.2",

Vue 2 与 Webpack 模块联合

Vue 2 with Webpack module federation

vue.js

webpack

webpack-module-federation