记录webpack 运行vue项目的巨坑！！！各种版本兼容问题！

云逸创客

于 2024-08-28 23:20:37 发布

阅读量376

点赞数 5

文章标签： webpack vue.js 前端

本文链接：https://blog.csdn.net/u010423663/article/details/141652124

版权

查看已安装的依赖：

npm list --depth=0

解决依赖冲突

你的项目依赖 webpack@5.94.0，而 html-webpack-plugin@3.2.0 和其他某些依赖需要 webpack@^4.0.0。这导致了依赖冲突。

解决依赖冲突

1. 统一 `webpack` 版本

a. 降级到 webpack v4（如果你不需要 webpack v5 的特性）

npm install webpack@4.47.0 webpack-cli@3.3.12 --save-dev

2. 安装或升级 `@babel/core`

安装适用于你项目的 @babel/core 版本：

npm install @babel/core@^7.4.0 --save-dev

3. 重新安装 `node-gyp`

确保你的 node-gyp 版本与当前 Node.js 版本兼容：

npm install node-gyp@latest --save-dev

4. 清理缓存并重新安装所有依赖

有时，清理 npm 缓存并重新安装依赖可以解决一些问题：

npm install

5. 验证安装

使用以下命令检查依赖树，确保没有未解决的依赖问题：

npm list --depth=0

@vue/cli-service 3.x 版本可能不完全支持 html-webpack-plugin 5.x。如果你遇到兼容性问题，考虑将 @vue/cli-service 升级到 4.x 版本：

npm install @vue/cli-service@^4.5.0 --save-dev

3. 验证依赖

运行以下命令，检查依赖是否已正确解决：

npm list html-webpack-plugin

你当前的 html-webpack-plugin 依赖版本仍然存在冲突。特别是，script-ext-html-webpack-plugin 需要 html-webpack-plugin 版本 ^3.0.0 或 ^4.0.0，但你的项目中有 html-webpack-plugin@5.6.0。

解决步骤

降级 html-webpack-plugin 到兼容的版本

你需要将 html-webpack-plugin 降级到与 script-ext-html-webpack-plugin 兼容的版本（例如 4.x 版本）。可以尝试以下命令来降级：

npm install html-webpack-plugin@^4.0.0 --save-dev
检查最终依赖

确保所有依赖都正确安装且没有版本冲突。运行：

npm list html-webpack-plugin

-- webpack-dev-server兼容

解决步骤

而你当前使用的是 webpack@5.94.0。

你遇到的错误提示是关于 tslib 的缺失。这是因为一些包要求 tslib 的特定版本，但它没有被安装或满足这些要求。tslib 是 TypeScript 的运行时库，通常用于优化 TypeScript 编译的代码。

你当前的 webpack-dev-server 和 webpack-dev-middleware 版本与已安装的 webpack 版本存在不兼容问题。具体来说：
webpack-dev-server@2.9.1 需要 webpack@^2.2.0 || ^3.0.0
webpack-dev-middleware@1.12.2 需要 webpack@^1.0.0 || ^2.0.0 || ^3.0.0
更新 webpack-dev-server 和 webpack-dev-middleware

升级 webpack-dev-server 和 webpack-dev-middleware 以与 webpack@5.x 版本兼容。你可以安装 webpack-dev-server 和 webpack-dev-middleware 的最新版本，这些版本应该与 webpack@5.x 兼容。

npm install webpack-dev-server@latest webpack-dev-middleware@latest --save-dev