Laravel Breeze 新项目中执行 npm run dev 出现警告且登录/注册页无样式，根本原因是混用了 Vite（Breeze 默认）与 Laravel Mix（旧版配置残留），导致资源未正确编译，@vite([...]) 指令也无法解析。
laravel breeze 新项目中执行 `npm run dev` 出现警告且登录/注册页无样式，根本原因是混用了 vite（breeze 默认）与 laravel mix（旧版配置残留），导致资源未正确编译，`@vite([...])` 指令也无法解析。
Laravel Breeze 自 v1.20.0 起已全面弃用 Laravel Mix，转而默认采用 Vite 作为前端构建工具。你遇到的错误——控制台显示 3 WARNINGS in child compilations、页面顶部意外渲染出原始 Blade 指令 @vite(['resources/css/app.css', 'resources/js/app.js'])、以及登录/注册页完全无样式——均指向一个关键矛盾：项目仍尝试运行 npm run dev（Mix 脚本），但实际需要的是 npm run build 或 npm run dev（Vite 脚本）。
? 根本原因分析
- php artisan breeze:install 会根据 Laravel 版本自动选择前端栈：Laravel 10+ 默认使用 Vite；
- 但若项目曾手动配置过 Laravel Mix（如保留了 webpack.mix.js、package.json 中含 "dev": "mix" 等脚本），或全局安装了旧版 Mix 工具，会导致 npm run dev 执行 Mix 而非 Vite；
- 此时 Vite 的 @vite 指令无法被识别（因 Mix 不处理该指令），Blade 模板直接输出为纯文本，CSS/JS 也未加载，故页面裸奔。
✅ 正确解决方案（三步清除 Mix，启用 Vite）
1. 彻底移除 Laravel Mix 相关文件与依赖
# 删除 Mix 配置和构建产物 rm webpack.mix.js rm -rf public/mix-manifest.json public/assets # 卸载 Mix 及其依赖（避免冲突） npm uninstall laravel-mix --save-dev npm uninstall cross-env --save-dev
2. 确保 package.json 使用 Vite 脚本
检查并修正 scripts 字段（Laravel Breeze 默认已配置）：
"scripts": {
"dev": "vite",
"build": "vite build"
}
⚠️ 注意：不要手动改为 mix 或 npm run mix —— 这是旧方案。
3. 清理缓存并重装依赖
# 清理 node_modules 和 lock 文件（推荐） rm -rf node_modules package-lock.json npm cache clean --force # 重新安装（确保 vite 及其插件正确安装） npm install # 启动 Vite 开发服务器 npm run dev
✅ 成功标志：终端显示 vite v5.x.x dev server running，浏览器访问 http://localhost:5173（或你的 Laravel 服务地址）时，@vite(...) 指令被自动替换为 <script type="module" src="/@vite/client"> 等注入标签，CSS 和 JS 正常加载，登录页恢复 Tailwind 样式。</script>
? 补充说明与注意事项
- 勿强行降级 Breeze：答案中提到的 npm install laravel-mix@6.0.49 --save-exact 是针对 错误选用 Mix 版本 的临时补救，但违背 Laravel 官方推荐路径，易引发兼容性问题（如 Laravel 11+ 已完全移除 Mix 支持），不建议采用。
- 检查 Blade 模板：确认 resources/views/layouts/app.blade.php 中包含 @vite(['resources/css/app.css', 'resources/js/app.js'])，而非 @mix(...) 或手动引入 CSS/JS。
- 环境一致性：若团队协作，确保 .gitignore 已排除 node_modules/ 和 public/build/，并提交更新后的 package.json 和 vite.config.js。
遵循以上步骤，即可彻底解决 Breeze 的构建混乱问题，回归现代、轻量、高效的 Vite 开发体验。
