Vue CLI项目npm run serve因webpack与laravel-mix版本冲突运行崩溃求助

问题根因 #

你遇到的报错是版本不兼容导致的：@vue/cli-service ~4.5.0 版本仅支持Webpack 4，你安装的Webpack 5超出了它的兼容范围，所以执行npm run serve会抛出模块属性移除的错误；而降级到Webpack 4后，laravel-mix ^6.0.31的资源合并逻辑又和Webpack 4存在适配问题，导致没有产物输出。

解决方案 #

方案一：升级Vue CLI到支持Webpack 5的版本（推荐） #

这个方案可以让两套工具共用同一套依赖，不需要拆分环境：

1. 卸载旧版本Vue CLI相关依赖

npm uninstall @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint

2. 安装5.x版本的对应依赖

npm install --save-dev @vue/cli-service@~5.0.0 @vue/cli-plugin-babel@~5.0.0 @vue/cli-plugin-eslint@~5.0.0

3. 删除项目根目录的node_modules文件夹、package-lock.json（或yarn.lock）文件，重新执行npm install安装所有依赖
4. 分别测试npm run serve和npm run dev，两套命令均可正常执行。如果遇到eslint或babel配置报错，根据提示微调对应配置项即可。

方案二：拆分两套构建工具的依赖环境 #

如果不想升级Vue CLI，可以将Laravel Mix的运行环境和Vue CLI的运行环境拆分，避免依赖冲突：

1. 先将Webpack降级回4.x版本，保证npm run serve可以正常运行

npm install --save-dev webpack@^4.46.0

2. 在项目根目录新建一个独立的mix-workspace文件夹，进入该文件夹初始化npm，单独安装laravel-mix及相关依赖
3. 将原项目根目录的webpack.mix.js移入该文件夹，调整里面的资源路径为相对于mix-workspace的路径
4. 修改根目录package.json中的dev命令为：cd mix-workspace && npm run dev
   调整完成后，Vue CLI使用Webpack 4正常启动开发服务，Laravel Mix在独立目录使用自己的依赖处理资源合并，互不影响。

可选方案：移除Laravel Mix，直接用Vue CLI处理资源合并 #

你当前用Laravel Mix实现的sass编译、css合并、js合并需求，Vue CLI本身完全可以支持，不需要额外引入laravel-mix，从根源上避免依赖冲突。只需要在vue.config.js中配置对应的资源处理规则，把原来写在webpack.mix.js里的合并逻辑转移过来，直接用Vue CLI的构建流程处理所有资源即可。

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