删除node_modules后运行npm run serve出现Webpack配置验证错误

问题分析 #

报错信息明确说明：Webpack 5中output.jsonpFunction已被废弃，替换为output.chunkLoadingGlobal。但你的项目基于Vue CLI 4.x（对应Webpack 4），本不该触发Webpack 5的校验逻辑，问题大概率来自以下场景：

• 全局安装的@vue/cli版本过高（如5.x，对应Webpack 5），导致本地项目调用了全局的Webpack 5依赖
• 项目依赖中的某个插件（如single-spa相关插件）强制拉取了Webpack 5版本
• 本地或全局缓存残留了Webpack 5的包文件

解决方案 #

1. 对齐全局Vue CLI版本 #

先检查全局Vue CLI版本：

vue --version

确保全局版本和项目中@vue/cli-service的版本（4.5.19）一致。如果全局版本是5.x，执行以下命令降级：

npm uninstall -g @vue/cli
npm install -g @vue/cli@4.5.19

2. 强制锁定Webpack 4版本 #

在项目的package.json中添加resolutions字段，强制所有依赖使用Webpack 4：

{
  // 原有内容保留
  "resolutions": {
    "webpack": "^4.46.0"
  }
}

如果使用npm，需要安装npm-force-resolutions让配置生效：

npm install -D npm-force-resolutions

同时修改scripts添加预安装钩子：

"scripts": {
  "preinstall": "npx npm-force-resolutions",
  // 原有脚本不变
}

之后重新安装依赖：

# Windows环境执行：rmdir /s /q node_modules && del package-lock.json
rm -rf node_modules package-lock.json
npm install

3. 适配single-spa插件版本 #

你使用的vue-cli-plugin-single-spa@3.3.0和standalone-single-spa-webpack-plugin@3.0.0更适配Webpack 5，尝试降级到适配Webpack 4的版本：

npm uninstall vue-cli-plugin-single-spa standalone-single-spa-webpack-plugin
npm install -D vue-cli-plugin-single-spa@2.3.0 standalone-single-spa-webpack-plugin@2.2.0

4. 彻底清理缓存 #

执行以下命令清除全局和本地缓存：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

为什么另一台机器正常？ #

另一台机器的全局Vue CLI版本为4.x，且本地node_modules中依赖的Webpack版本稳定在4.x，没有被意外升级，因此可以正常运行。

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