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

Question

vite 执行npm install 报错

While resolving: @vitejs/plugin-legacy@5.3.2
npm ERR! Found: vite@4.4.7
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.3.2" from the root project
npm ERR!   peer vite@"^4.0.0" from @vitejs/plugin-vue@4.2.3
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     dev @vitejs/plugin-vue@"^4.1.0" from the root project
npm 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.2
npm ERR! node_modules/@vitejs/plugin-legacy
npm ERR!   dev @vitejs/plugin-legacy@"^5.3.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vite@5.2.7
npm ERR! node_modules/vite
npm ERR!   peer vite@"^5.0.0" from @vitejs/plugin-legacy@5.3.2
npm ERR!   node_modules/@vitejs/plugin-legacy
npm ERR!     dev @vitejs/plugin-legacy@"^5.3.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm 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

npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

报错信息说得很清楚了，使用 npm i --legacy-peer-deps