LaravelVite如何配置_LaravelVite前端资源编译加速【现代】-php教程-PHP中文网

@vite指令不生效、热更新失效、构建后资源404，根本原因是laravel-vite-plugin配置未匹配环境或路径：开发服务器未运行、NODE_ENV非development、server.host设为'0.0.0.0'、@vite参数非数组、buildDir与Web服务器路径不一致、refresh未启用或入口文件缺失。

laravelvite如何配置_laravelvite前端资源编译加速【现代】

@vite 指令不生效、热更新失效、构建后资源 404 —— 根本不是 Vite 本身的问题，而是 laravel-vite-plugin 的配置没对上环境或路径。

为什么 @vite(['resources/js/app.js']) 加载的是 public/build 下的旧文件？

这是开发服务器根本没跑起来，或者 @vite 没拿到正确的开发地址。常见原因有：

NODE_ENV 不是 development（Docker 或某些终端会覆盖它，建议显式运行 NODE_ENV=development npm run dev）
vite.config.js 中 server.host 设成了 '0.0.0.0'，浏览器拒绝连接；必须改用 true 或显式写 'localhost'
package.json 里没配 "dev": "vite"，或者你没在项目根目录（含 package.json 和 vite.config.js 的那层）运行 npm run dev
@vite 参数写成字符串，比如 @vite('resources/js/app.js') —— 必须是数组：@vite(['resources/js/app.js'])，否则静默失败

build 后 public/build 下的 JS/CSS 404 怎么办？

不是路径写错，是 laravel-vite-plugin 的输出和 Web 服务器没对齐：

别动 vite.config.js 里的 build.outDir —— laravel-vite-plugin 完全忽略它，只认自己的 buildDir（默认就是 'public/build'）
确保 Nginx/Apache 允许访问 /build/ 路径，例如 Nginx 配置加一句：location /build/ { try_files $uri $uri/ =404; }
部署时必须上传整个 public/build 目录，不能只传 JS/CSS 文件（manifest.json 和哈希文件缺一不可）
用了 CDN？得在 vite.config.js 里加 base: 'https://cdn.example.com/build/'，否则 @vite 还是按相对路径生成

Vue/TS 项目热更新不触发，改了 .vue 文件没反应？

大概率是 laravel-vite-plugin 的 refresh 没启用，或入口文件根本没被识别：

HISUI 前端框架开发指南（IRIS版）

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载

确认 laravel() 插件调用里启用了 refresh: true（Laravel 11+ 默认开，但重装插件后常被删掉）
input 数组里每个路径都得真实存在，哪怕只是空文件 —— 少一个，整个插件初始化就跳过
Vue 项目必须显式引入 @vitejs/plugin-vue，laravel-vite-plugin 不自动处理 SFC 语法
TypeScript 项目检查 tsconfig.json 是否设了 "noEmit": true，这会导致编译无输出，看起来像“没打包”

Tailwind CSS 在 Blade 中不生效，但控制台没报错？

最隐蔽的坑：Vite 不会主动处理 @tailwind 指令，CSS 必须由 JS 入口显式 import 才能进构建流程：

resources/css/app.css 中必须按顺序写三行：@tailwind base;、@tailwind components;、@tailwind utilities;
resources/js/app.js（或你实际的主入口）里必须有 import '../css/app.css';
tailwind.config.js 的 content 字段要覆盖到你的 Blade 模板路径，比如 "./resources/**/*.blade.php"
别在 Blade 里直接 @vite('resources/css/app.css') —— Vite 只认 JS 入口，CSS 是附带产物

真正卡住人的地方，往往不是某个配置项写错了，而是 laravel-vite-plugin 和 @vitejs/plugin-vue 这类插件之间的依赖关系没理清：refresh 要靠 laravel-vite-plugin 触发，而 Vue 语法支持又得靠另一个插件提供，两者缺一不可，且顺序不能颠倒。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！