Laravel如何快速配置Vite进行前端编译？（开发环境）-Laravel-PHP中文网

Laravel 的 vite 命令不生效是因为未安装 Vite 运行时依赖，需在项目根目录执行 npm install 并确保 package.json 含 "dev": "vite" 脚本；@vite 指令需开发服务器运行且参数为数组；热更新失败多因反向代理未透传 WebSocket 或浏览器缓存。

laravel如何快速配置vite进行前端编译？（开发环境）

为什么 Laravel 的 `vite` 命令不生效？

因为 Laravel 默认没装 Vite 运行时依赖，vite 命令是 Node.js 工具链的一部分，不是 Laravel 自带的。你执行 npm run dev 或 vite 报 “command not found”，大概率是没在项目根目录运行，或 package.json 里没配好脚本。

确认已执行 npm install（不是 npm ci，后者跳过 devDependencies）
package.json 中必须有 "scripts": { "dev": "vite", "build": "vite build" } —— Laravel 10+ 脚手架默认带，但手动升级或老项目常漏掉
别在 resources/js 下执行 vite，必须在 Laravel 项目根目录（即含 package.json 和 vite.config.js 的那层）

如何让 `@vite` Blade 指令正确注入开发服务器地址？

@vite 不是魔法，它依赖 Vite 开发服务器是否正在运行，以及环境变量是否匹配。开发时若 CSS/JS 404 或加载的是生产路径，问题基本出在这儿。

启动开发服务器前，确保 NODE_ENV=development（Laravel 默认已设，但某些终端会覆盖）
VITE_DEV_SERVER_URL 环境变量不能手动设错；Vite 插件会自动读取 vite.config.js 中的 server.host 和 server.port 注入到 Blade
Blade 中必须用 @vite(['resources/js/app.js'])，不能写成 @vite('resources/js/app.js')（参数必须是数组）
如果用了 server.host: '0.0.0.0'，但本地访问 http://localhost:5173，Vite 插件可能注入 http://0.0.0.0:5173 导致跨域或拒绝连接 —— 改成 server.host: true 或显式设为 'localhost'

`vite.config.js` 需要改哪些关键项才能适配 Laravel？

Laravel 的 Vite 插件（@vitejs/plugin-vue 或 laravel/vite-plugin）本身已处理大部分集成逻辑，但几个路径和插件选项不调就容易编译失败或热更新失效。

laravel-specialist

精通 Laravel 10+，遵循现代 PHP 实践的 Laravel 专家。擅长优雅语法、Eloquent ORM、队列系统及企业级特性...

下载

入口必须指向 resources/js/app.js（或你实际的主入口），且该文件存在并导出内容（哪怕只写 console.log("ok")）
输出目录建议保持默认 dist，Laravel 的 @vite 会自动映射到 public/build/，但构建后文件实际仍放在 public/build/，这是由 laravel/vite-plugin 的 buildDir 控制的，不是 Vite 默认行为
若用 Vue，必须显式启用 @vitejs/plugin-vue 插件；Laravel 官方模板已配好，但删了又重装容易漏
别动 resolve.alias 里的 @ 别名 —— Laravel 的 laravel/vite-plugin 默认把它指向 resources/js，改了会导致 import '@/Components/xxx.vue' 找不到

为什么修改 JS 后页面不热更新？

常见原因不是 Vite 本身坏了，而是 Laravel 的 HTTP 层或浏览器缓存干扰了 HMR（热模块替换）信号。

检查浏览器控制台有没有 [vite] connecting... 和后续的 connected 日志；没有说明 WebSocket 连接失败 —— 大概率是 Nginx/Apache 反向代理没透传 WebSocket 协议（Upgrade 和 Connection header）
开发时务必用 php artisan serve 或直接访问 http://localhost:5173（绕过 Laravel 服务器），否则 Vite 的 HMR 请求会被 Laravel 当作普通路由拦截
Chrome 浏览器开启“Disable cache”（Network 面板左上角勾选），否则即使 HMR 触发，浏览器也可能用旧 JS 缓存
Vue 组件内若用了 defineComponent 但没导出默认对象，或用了 setup() 但没返回响应式数据，HMR 会静默失败 —— 看控制台是否有 HMR update failed 提示