`vite` 执行`npm install` 报错,这种怎么改？

Question

vite 执行npm install 报错

While resolving: @vitejs/plugin-legacy@5.3.2npm ERR! Found: vite@4.4.7npm ERR! node_modules/vitenpm ERR!   dev vite@"^4.3.2" from the root projectnpm ERR!   peer vite@"^4.0.0" from @vitejs/plugin-vue@4.2.3npm ERR!   node_modules/@vitejs/plugin-vuenpm ERR!     dev @vitejs/plugin-vue@"^4.1.0" from the root projectnpm ERR!   1 more (vite-plugin-eslint)npm ERR!npm ERR! Could not resolve dependency:npm ERR! peer vite@"^5.0.0" from @vitejs/plugin-legacy@5.3.2npm ERR! node_modules/@vitejs/plugin-legacynpm ERR!   dev @vitejs/plugin-legacy@"^5.3.2" from the root projectnpm ERR!npm ERR! Conflicting peer dependency: vite@5.2.7npm ERR! node_modules/vitenpm ERR!   peer vite@"^5.0.0" from @vitejs/plugin-legacy@5.3.2npm ERR!   node_modules/@vitejs/plugin-legacynpm ERR!     dev @vitejs/plugin-legacy@"^5.3.2" from the root projectnpm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force, or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!npm ERR! See C:\Users\admin\AppData\Local\npm-cache\eresolve-report.txt for a full report.npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\admin\AppData\Local\npm-cache\_logs\2024-04-01T08_41_12_637Z-debug-0.log

package.json

{    "name": "my-vue-app",    "private": true,    "version": "0.0.0",    "type": "module",    "scripts": {        "dev": "vite --mode development",        "pre": "vite --mode staging",        "prod": "vite --mode production",        "build:dev": "vite build --mode development",        "build:pre": "vite build --mode staging",        "build": "vite build --mode production",        "preview": "vite preview"    },    "dependencies": {        "@vant/area-data": "^1.5.1",        "ali-oss": "^6.16.0",        "axios": "^1.4.0",        "crypto-js": "^4.1.1",        "html2canvas": "^1.4.1",        "js-md5": "^0.7.3",        "moment": "^2.29.4",        "npm": "^10.5.0",        "pinia": "^2.1.3",        "swiper": "^9.3.2",        "vant": "^4.4.0",        "vue": "^3.2.47",        "vue-router": "^4.2.2",        "vue3-seamless-scroll": "^2.0.1"    },    "devDependencies": {        "@vitejs/plugin-legacy": "^5.3.2",        "@vitejs/plugin-vue": "^4.1.0",        "cnjm-postcss-px-to-viewport": "^1.0.0",        "eslint": "^8.41.0",        "eslint-config-prettier": "^8.8.0",        "eslint-plugin-prettier": "^4.2.1",        "eslint-plugin-vue": "^9.14.0",        "less": "^4.1.3",        "prettier": "^2.8.8",        "terser": "^5.30.0",        "unplugin-vue-components": "^0.24.1",        "vite": "^4.3.2",        "vite-plugin-eslint": "^1.8.1"    }}

Answer 1

这个错误是由于你的项目中的@vitejs/plugin-legacy插件需要的vite版本是^5.0.0，但你项目中安装的vite版本是4.4.7，因此产生了版本冲突。

有两种主要的解决方案：

1. 升级你的vite版本：

你可以通过运行npm install vite@latest来安装最新版本的vite，然后再尝试安装@vitejs/plugin-legacy。

npm install vite@latestnpm install @vitejs/plugin-legacy

2. 使用--legacy-peer-deps标志：

另一个选择是在安装时使用--legacy-peer-deps标志。这将使npm忽略对等依赖项冲突，并尝试继续安装。但请注意，这可能会导致运行时错误，因为某些插件可能无法与你的vite版本一起工作。

npm install @vitejs/plugin-legacy --legacy-peer-deps

我建议首先尝试升级vite版本，因为这将更有可能解决你的问题，而不会引入新的潜在问题。如果升级vite版本后问题仍然存在，那么你可以考虑使用--legacy-peer-deps标志。