Laravel项目跨电脑后Vite及依赖安装失败求助

问题概述 #

将正常运行的Laravel项目迁移到新电脑后，npm无法安装依赖或使用现有插件，频繁触发ERESOLVE依赖树解析错误；使用npm install --legacy-peer-deps绕过校验后，运行npm run dev又出现vite.createFilter is not a function错误。当前环境：npm 9.5.1，Laravel 9.30.1；曾通过apt-get install vite安装过Vite后卸载，怀疑此操作可能引发问题。

具体报错情况 #

1. 运行npm i时的ERESOLVE错误 #

ubulara@DESKTOP-B4JC6VG:~/aramis/project$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vite@2.9.16
npm ERR! node_modules/vite
npm ERR!   dev vite@"^2.9.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/plugin-vue@3.2.0
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   dev @vitejs/plugin-vue@"^3.0.1" from the root project

2. 安装指定版本@vitejs/plugin-vue@3.0.1时的错误 #

ubulara@DESKTOP-B4JC6VG:~/aramis/project$ npm i @vitejs/plugin-vue@3.0.1
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vite@2.9.16
npm ERR! node_modules/vite
npm ERR!   dev vite@"^2.9.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/plugin-vue@3.0.1
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   dev @vitejs/plugin-vue@"3.0.1" from the root project

3. 安装指定版本vite@2.9.11时的错误 #

ubulara@DESKTOP-B4JC6VG:~/aramis/project$ npm install vite@2.9.11
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vite@2.9.11
npm ERR! node_modules/vite
npm ERR!   dev vite@"2.9.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/plugin-vue@3.2.0
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   dev @vitejs/plugin-vue@"^3.0.1" from the root project

4. 使用--legacy-peer-deps后运行npm run dev的错误 #

ubulara@DESKTOP-B4JC6VG:~/aramis/project$ npm run dev

> dev
> vite

failed to load config from /home/ubulara/aramis/project/vite.config.js
error when starting dev server:
TypeError: vite.createFilter is not a function
    at vuePlugin (/home/ubulara/aramis/project/node_modules/@vitejs/plugin-vue/dist/index.cjs:2601:23)
    at Object.<anonymous> (/home/ubulara/aramis/project/vite.config.js:43:35)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at require.extensions.<computed> [as .js] (/home/ubulara/aramis/project/node_modules/vite/dist/node/chunks/dep-689425f3.js:62006:20)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at loadConfigFromBundledFile (/home/ubulara/aramis/project/node_modules/vite/dist/node/chunks/dep-689425f3.js:62014:17)
    at loadConfigFromFile (/home/ubulara/aramis/project/node_modules/vite/dist/node/chunks/dep-689425f3.js:61933:32)

5. 再次运行npm i的错误 #

ubulara@DESKTOP-B4JC6VG:~/aramis/project$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @vitejs/plugin-vue@3.2.0
npm ERR! Found: vite@2.9.15
npm ERR! node_modules/vite
npm ERR!   dev vite@"^2.9.11" from the root project
npm ERR!   peer vite@"^2.9.9" from laravel-vite-plugin@0.4.0
npm ERR!   node_modules/laravel-vite-plugin
npm ERR!     dev laravel-vite-plugin@"^0.4.0" from the root project
npm ERR!   1 more (vite-plugin-full-reload)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/plugin-vue@3.2.0
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   dev @vitejs/plugin-vue@"^3.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vite@3.2.7
npm ERR! node_modules/vite
npm ERR!   peer vite@"^3.0.0" from @vitejs/plugin-vue@3.2.0
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     dev @vitejs/plugin-vue@"^3.0.1" from the root project

当前项目package.json内容 #

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "@vitejs/plugin-vue": "^3.0.1",
        "axios": "^0.25",
        "bootstrap": "^5.2.1",
        "laravel-vite-plugin": "^0.4.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vite": "^2.9.11",
        "vue": "^3.2.37",
        "vue-template-compiler": "^2.6.12"
    }
}

解决方案 #

1. 清理残留文件与缓存 #

执行以下命令彻底清除现有依赖残留和npm缓存：

rm -rf node_modules
rm package-lock.json
npm cache clean --force

2. 修正依赖版本冲突 #

核心问题是laravel-vite-plugin@0.4.0要求vite@^2.9.9，而@vitejs/plugin-vue@3.x要求vite@^3.0.0，版本不兼容。需要将@vitejs/plugin-vue降级到适配Vite 2的版本，修改package.json中的对应依赖：

"@vitejs/plugin-vue": "^2.3.4",
"vite": "^2.9.11",
"laravel-vite-plugin": "^0.4.0"

3. 重新安装依赖 #

修改完成后运行：

npm install

4. 检查并移除全局Vite残留 #

之前通过apt安装的Vite可能存在全局残留，执行以下命令检查：

npm list -g vite

如果存在全局Vite，执行以下命令卸载：

npm uninstall -g vite

问题原因说明 #

• 跨电脑后npm版本差异：npm 9对peer依赖的校验逻辑比旧版本更严格，原有项目可能依赖旧版npm的宽松校验或使用了--legacy-peer-deps。
• 版本范围导致自动升级：@vitejs/plugin-vue@^3.0.1的版本范围会拉取最新的3.x版本（如3.2.0），而该版本要求Vite 3，与项目依赖的Vite 2冲突。
• 全局Vite残留：通过apt安装的Vite可能干扰本地项目依赖的加载逻辑。

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