Laravel 9新建项目搭建认证功能执行npm run dev报错排查

Laravel 9 版本默认前端构建工具从 Laravel Mix 替换为 Vite，通过composer require laravel/ui安装后生成的Bootstrap身份认证脚手架默认基于Laravel Mix编写配置规则，与项目自带的Vite默认配置存在直接冲突；本地Node.js版本低于14、npm依赖缓存损坏也会触发npm run dev执行失败。

两种方案二选一即可，优先选择方案一，兼容绝大多数Laravel历史教程逻辑，踩坑概率最低。

方案一：切回Laravel Mix适配laravel/ui脚手架 #

1. 清理旧依赖：手动删除项目根目录下的node_modules文件夹、package-lock.json文件，在CMD执行npm cache clean --force清理本地npm缓存。
2. 安装Laravel Mix相关依赖：

npm install laravel-mix resolve-url-loader sass sass-loader --save-dev

3. 删除项目根目录默认生成的vite.config.js文件，新建webpack.mix.js文件，写入以下配置：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

4. 打开根目录下的package.json，把scripts字段整体替换为Mix对应的执行脚本：

"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix hot",
    "prod": "npm run production",
    "production": "mix --production"
},

5. 确认本地Node.js版本为14以上，推荐直接升级到16LTS长期支持版，避免底层依赖兼容问题。
6. 重新执行依赖安装和构建命令：

npm install
npm run dev

执行完成后即可正常编译前端资源，身份认证相关页面的样式、交互不会出现异常。

方案二：保留Vite构建（适配Laravel 9新特性） #

如果不想使用旧版Laravel Mix，可以直接适配Vite生态：

1. 同样先清理旧依赖和缓存，执行npm install --save-dev bootstrap @popperjs/core sass安装Vite兼容的Bootstrap依赖。
2. 修改根目录vite.config.js，添加Bootstrap路径别名，在resources/js/app.js中引入Bootstrap JS模块，在resources/sass/app.scss中引入Bootstrap样式文件。
3. 直接执行npm install && npm run dev即可完成构建，该方案构建速度比Mix快2-3倍，适合无历史兼容需求的全新项目使用。

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