Laravel 中 Vite 构建部署需确保 Node.js ≥18、正确安装 laravel-vite-plugin 和 vite、配置 vite.config.js 指定入口和 outDir 为 public/build、Blade 中用 @vite(['resources/js/app.js']) 且开发时运行 npm run dev。
在 Laravel 项目中完成前端资源构建并部署，核心是让 Vite 正确接管开发与生产流程。关键不在“装得多”，而在于入口对、路径准、指令用对、环境匹配——尤其要注意 Laravel 的 @vite 指令不是万能胶，它依赖底层配置和运行状态。
确认基础环境与必要依赖
Vite 是 Node.js 工具链的一部分，Laravel 本身不提供 vite 命令。必须确保：
- Node.js 版本 ≥ 18（推荐 20.x），通过
node -v和npm -v验证 - 项目根目录下存在
package.json，且已执行过npm install（不是npm ci） -
package.json的scripts包含："dev": "vite"和"build": "vite build" - 已安装
laravel-vite-plugin（Composer 包）和vite（npm 包）：composer require laravel/vitenpm install vite --save-dev
vite.config.js 必配项说明
这个文件决定 Vite 如何识别入口、输出资源、适配 Laravel。默认位置：项目根目录。
-
入口必须明确：主 JS 文件（如
resources/js/app.js）需被laravel()插件声明为入口 -
输出目录设为
public/build：Laravel 的@vite指令默认读取该路径下的 manifest，不可随意改outDir后不调整 Blade 行为 -
开发服务器 host 推荐
'localhost'：避免因'0.0.0.0'导致浏览器拒绝连接或跨域问题 -
启用框架插件（如 Vue/React）：例如用 Vue 3，必须显式引入
@vitejs/plugin-vue并加入plugins: [] -
别名
@保持默认：Laravel 插件已设为指向resources/js，手动覆盖易导致 import 失败
Blade 中正确使用 @vite
@vite 不是语法糖，它会根据当前环境自动切换开发代理链接或生产静态路径。
立即学习“前端免费学习笔记（深入）”；
- 参数必须是数组：
@vite(['resources/js/app.js'])✅@vite('resources/js/app.js')❌（会报错或静默失败） - 开发时，
npm run dev必须正在运行；否则加载的是 public/build 下的旧文件或 404 - 确保
APP_ENV=local或APP_DEBUG=true，否则 Laravel 可能跳过 HMR 注入逻辑 - CSS 文件不能单独传入
@vite：必须由 JS 入口（如app.js）通过import '../css/app.css'引入
构建与部署实操要点
运行 npm run build 后，Vite 将资源输出到 public/build，生成带哈希的文件名（如 assets/app.a1b2c3d4.js）和 manifest.json。
-
@vite在生产环境自动读取manifest.json，映射出正确的带哈希路径，无需手动修改 Blade - 部署时只需把整个
public/目录（含build/）上传至 Web 服务器或 CDN - Nginx/Apache 不需要额外重写规则——所有资源都是静态文件，直接由 Web 服务器响应
- 若使用 CDN，建议将
public/build映射为子路径（如https://cdn.example.com/build/），并在vite.config.js中设置base: '/build/'
