Laravel React Breeze执行npm run dev报错：vite命令未找到求助

环境信息 #

• 操作系统：CentOS7
• Laravel版本：9.26.1
• Node版本：v16.17.0
• NPM版本：8.15.0

操作流程 #

创建集成React的Laravel新项目并通过Breeze实现认证，执行命令如下：

composer create-project laravel/laravel new-project
php artisan breeze:install
php artisan breeze:install react
npm install
npm run dev

问题现象 #

前序命令均执行成功，但运行npm run dev时出现错误：

/tmp/dev-xxxxxx.sh: line 1: vite: command not found

已尝试Vite社区相关方案但无效，项目package.json内容如下：

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@headlessui/react": "^1.4.2",
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-react": "^0.8.0",
        "@inertiajs/progress": "^0.2.6",
        "@tailwindcss/forms": "^0.5.2",
        "@vitejs/plugin-react": "^2.0.0",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "tailwindcss": "^3.1.0"
    },
    "dependencies": {
        "vite": "^3.0.9"
    }
}

解决方案 #

1. 重新安装依赖包 #

进入项目根目录，删除现有依赖文件后重新安装：

rm -rf node_modules package-lock.json
npm install

安装完成后再次执行npm run dev测试。

2. 用npx调用本地vite #

修改package.json中的scripts命令，通过npx直接调用本地安装的vite：

"scripts": {
    "dev": "npx vite",
    "build": "npx vite build"
}

保存后运行npm run dev。

3. 配置npm全局路径到系统环境变量 #

CentOS7默认npm全局包路径可能不在系统PATH中，先查看全局包路径：

npm config get prefix

将输出路径下的bin目录添加到系统PATH：

echo 'export PATH="$HOME/.npm-global/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

之后可全局安装vite（可选，优先推荐本地安装）：

npm install -g vite

4. 切换npm源解决安装失败问题 #

若因网络问题导致vite未安装成功，切换到国内npm镜像源后重新安装：

npm config set registry https://registry.npmmirror.com/
rm -rf node_modules package-lock.json
npm install

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