Vue项目运行npm i时出现ERESOLVE webpack依赖冲突报错

npm 7及以上版本默认开启严格的peer依赖校验，当前项目使用的webpack@4.46.0属于4.x大版本，而项目中声明的mini-css-extract-plugin@^2.2.1会拉取2.x版本，该版本的peer依赖明确要求webpack@^5.0.0，版本要求不匹配导致依赖树解析失败。

• 方案1：适配现有webpack4版本，降级mini-css-extract-plugin（零兼容风险，最推荐）
  mini-css-extract-plugin的1.x大版本是官方专门适配webpack4的稳定版本，直接安装对应最新稳定版即可：

npm install --save-dev mini-css-extract-plugin@1.6.2

安装完成后重新执行npm install即可正常完成依赖安装，该版本经过长期项目验证，和webpack4、Vue2技术栈的适配性没有问题。

• 方案2：升级构建栈到webpack5（适合有长期迭代计划的项目）
  如果后续有构建工具升级计划，可以将webpack升级到5.x版本，同时同步调整所有和webpack耦合的loader、plugin到适配webpack5的对应版本，比如vue-loader、css-loader、terser-webpack-plugin等。该方案改动量较大，升级完成后需要完整验证本地开发、生产构建全流程功能正常，避免出现构建异常。

• 方案3：临时绕过依赖校验（仅用于临时调试，禁止生产环境使用）
  如果暂时不需要调整依赖版本，可以在安装时加参数跳过peer依赖严格校验：

npm install --legacy-peer-deps

注意：该方案只是绕过了npm的依赖校验逻辑，没有解决实际的版本不兼容问题，后续执行构建命令时大概率会因为API不匹配出现mini-css-extract-plugin运行报错，绝对不能用于正式生产环境的依赖安装。

内容的提问来源于stack exchange，提问作者Abdallah Abu Amra