@vite指令不加载开发服务器资源的主因是server.host设为'0.0.0.0'导致浏览器拒绝连接,应改用true或'localhost',且NODE_ENV必须为development。

@vite 指令不加载开发服务器资源?检查 vite.config.js 的 server.host 和 NODE_ENV
最常见现象是页面加载了 app.js,但实际请求的是 http://localhost:5173/resources/js/app.js(404)或直接走 public/build/ 下的旧文件。根本原因不是路径写错,而是 Vite 插件没拿到正确的开发服务地址。
-
server.host别设成'0.0.0.0'—— 浏览器会拒绝连接,改用true或显式写'localhost' -
NODE_ENV必须为development(Laravel 默认设好,但某些终端或 Docker 环境会覆盖) - 确保
package.json里有"dev": "vite",且你在 Laravel 项目根目录运行npm run dev,不是在resources/js或子目录下 -
@vite的参数必须是数组:@vite(['resources/js/app.js']),写成字符串会静默失败
build 后 public/build 资源 404?确认 laravel-vite-plugin 的 buildDir 与 Nginx/Apache 配置一致
Vite 默认输出到 dist,但 Laravel 的 laravel-vite-plugin 强制接管输出路径为 public/build。如果手动改过 build.outDir,或者用了自定义插件,就容易导致 manifest 找不到、Blade 注入路径错乱。
立即学习“前端免费学习笔记(深入)”;
- 不要在
vite.config.js里改build.outDir——laravel-vite-plugin会忽略它,只认自己的buildDir选项(默认就是'public/build') - 部署时必须上传整个
public/build目录,不能只传 JS/CSS 文件 - Nginx 配置里要允许访问
/build/路径,比如location /build/ { try_files $uri $uri/ =404; } - 如果用 CDN,需在
vite.config.js中加base: 'https://cdn.example.com/build/',否则@vite仍按相对路径生成
Vue/TS 项目热更新失效?refresh 配置和入口文件存在性是关键
修改 .vue 文件后页面不刷新,或改了 Blade 模板也不触发 HMR,大概率是 laravel-vite-plugin 的 refresh 没生效,或主入口根本没被正确识别。
- 必须启用
refresh: true(Laravel 官方模板默认开启,但删插件重装后常漏) -
input数组里列出的每个路径都得真实存在,哪怕只是空文件 —— 缺一个,Vite 就跳过整个插件初始化 - Vue 项目必须装
@vitejs/plugin-vue并在plugins里显式引入,laravel-vite-plugin不自动处理框架语法 - TypeScript 类型检查不阻断构建,但
tsconfig.json里若设了"noEmit": true,会导致编译无输出,看起来像“没打包”
真正卡住人的地方往往不是配置项本身,而是 Vite 插件链的执行顺序和环境变量的隐式依赖 —— 比如 refresh 依赖 laravel-vite-plugin 的 HMR handler,而 handler 又依赖 server.hmr.overlay 是否启用;这些细节不报错,只让功能静默降级。


















