laravel 9.19+ 默认支持 vite,需运行 php artisan vite:install 初始化配置,确保 vite 与框架插件版本对齐,app_url 设为 http://localhost:5173,使用 @vite 指令引入资源,勿手动写路径。

怎么在 Laravel 项目里启用 Vite 而不是 Mix
直接删掉 webpack.mix.js,Laravel 从 9.19+ 默认支持 Vite,但需要手动初始化。旧项目升级时,vite 和 @vite/react(或对应框架插件)必须版本对齐,否则 npm run dev 启动失败或 HMR 不生效。
- 运行
php artisan vite:install自动生成vite.config.js和资源入口(如resources/js/app.js) - 检查
package.json中"dev": "vite"和"build": "vite build"是否存在,没有就补上 -
APP_URL必须设为http://localhost:5173(开发时),否则 Vite 的 HMR 请求会跨域被浏览器拦截
Vite 配置文件里哪些项 Laravel 项目不能乱改
vite.config.js 里 build.outDir 默认是 public/build,这是 Laravel 的硬编码路径,改了会导致 @vite Blade 指令找不到资源;server.host 建议显式设为 '0.0.0.0',不然 Docker 或 WSL 下访问不到。
-
resolve.alias如果加了@别名,需同步在tsconfig.json或jsconfig.json里声明,否则 IDE 报错、TS 类型检查失效 - 不要删掉
laravel-vite-plugin插件,它是让@vite指令读取manifest.json的关键 -
define中的import.meta.env.VITE_API_BASE这类变量,在 Blade 里拿不到,只能在 JS 中用 —— Laravel 不解析 Vite 环境变量
Blade 模板里怎么正确引入 Vite 构建的资源
别手写 <script src="/build/xxx.js"></script>,Laravel 提供的 @vite 指令会自动处理开发代理和生产哈希路径。它不是语法糖,而是依赖 manifest.json 做映射,手动写死路径上线后 404。
- 开发时:
@vite(['resources/js/app.js'])→ 自动走http://localhost:5173/@vite/client+ HMR - 生产时:
@vite(['resources/js/app.js'])→ 自动转成带 hash 的<script src="/build/assets/app.xxxx.js"></script> - 如果用了多入口(比如后台和前台分离),每个入口都要单独
@vite([...]),不能合并传入多个 JS 文件
运行 vite build 后 public/build 里没生成 manifest.json 怎么办
大概率是 vite.config.js 里 build.rollupOptions.output.manualChunks 或 plugins 配置破坏了默认行为,或者 laravel-vite-plugin 版本太低(
立即学习“前端免费学习笔记(深入)”;
- 先确认安装的是
laravel-vite-plugin,不是vite-plugin-laravel(后者不兼容) - 执行
npx vite build --debug看是否报[vite] Manifest is disabled,有则说明插件没生效 - 检查
vite.config.js是否漏掉了plugins: [laravel(...)],或者用了export default defineConfig({})却没 importlaravel
manifest.json 缺失最直接的后果是生产环境 @vite 指令渲染为空,页面白屏 —— 这个点很容易被忽略,因为开发时完全不影响。










