Laravel 9 中 Vite 构建失败与 Bootstrap 集成指南-php教程-PHP中文网

Laravel 9 中 Vite 构建失败与 Bootstrap 集成指南

本文详解 laravel 9 默认 vite 构建流程下出现 “vite manifest not found” 错误的根本原因，提供 node.js 版本适配、依赖重装、构建命令修正及 bootstrap 资源正确引入的完整解决方案。

本文详解 laravel 9 默认 vite 构建流程下出现 “vite manifest not found” 错误的根本原因，提供 node.js 版本适配、依赖重装、构建命令修正及 bootstrap 资源正确引入的完整解决方案。

Laravel 9 默认采用 Vite 作为前端构建工具（取代了旧版的 Webpack + Mix），而你执行 php artisan ui bootstrap 实际上是为 Laravel 8 及更早版本设计的遗留命令——它会修改 webpack.mix.js 并生成过时的资源结构，与 Laravel 9 的 Vite 生态完全不兼容。这正是你遇到两个关键问题的根源：

npm run dev 报 SyntaxError: Unexpected reserved word（因 Node.js 版本过低，不支持 await import() 语法）；
访问 /login 时抛出 Vite manifest not found（因未执行 Vite 构建，public/build/manifest.json 缺失，且 Blade 模板中仍尝试通过 @vite 加载不存在的资源）。

✅ 正确解决路径如下：

1. 升级 Node.js 与 npm（必需）

Laravel 9 + Vite 要求 Node.js ≥ 16.10（推荐 18.x LTS）。Ubuntu 22.04 自带的 Node.js 通常为 12.x 或 14.x，需手动升级：

# 卸载旧版（如有）
sudo apt remove nodejs npm

# 使用 NodeSource 安装 Node.js 18
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs

# 验证版本
node -v  # 应输出 v18.x.x
npm -v   # 应输出 9.x+

2. 清理旧 UI 配置，改用官方推荐方案

删除由 php artisan ui bootstrap 生成的废弃文件：

rm -rf resources/js/bootstrap.js resources/sass
rm webpack.mix.js

然后不再使用 laravel/ui，改用 Laravel 官方轻量级脚手架 Laravel Breeze（已原生支持 Vite + Bootstrap 5）：

composer require laravel/breeze --dev
php artisan breeze:install bootstrap
npm install
npm run build  # ✅ 关键：生成 public/build/manifest.json

? 注意：Breeze 会自动配置 vite.config.js 和 resources/js/app.js，并确保 Bootstrap CSS/JS 正确导入（通过 import 'bootstrap' 和 SCSS 变量覆盖）。

Laravel Creem Agent
Creem 支付商店助理 — 查询订阅、客户、交易、产品，执行心跳检查，管理本地 Laravel支付商店。

下载

3. 确保 Blade 模板正确引用 Vite 资源

检查 resources/views/layouts/app.blade.php（或登录页模板），确认包含以下 Vite 指令（Breeze 已自动注入）：

@vite(['resources/js/app.js', 'resources/css/app.css'])

该指令在开发环境注入 HMR 脚本，在生产环境读取 public/build/manifest.json 加载哈希化资源。

4. 启动开发服务器并验证

# 开发模式（带热更新）
npm run dev

# 或启动 Laravel 内置服务器
php artisan serve

此时访问 http://127.0.0.1:8000/login，页面应正常渲染，浏览器控制台无 404，Network 标签中可见 build/assets/app-*.css 和 build/assets/app-*.js 加载成功。

? 重要提醒：

❌ 不要再运行 npm run dev 前执行 php artisan ui bootstrap —— 它会污染项目结构；
✅ 生产部署前务必运行 npm run build（而非 dev），否则 manifest.json 不存在将导致 500 错误；
若需自定义 Bootstrap 主题，编辑 resources/sass/app.scss，并在 resources/js/app.js 中保留 import './bootstrap'; 即可。

至此，Laravel 9 与 Bootstrap 5 在 Vite 构建体系下的集成即告完成——现代、高效且符合 Laravel 官方演进方向。