Laravel如何使用Vite进行前端资源打包？（配置示例）

Laravel 9.19+ 官方集成 Vite，替换 Laravel Mix，通过 vite.config.js 配置入口与热更新，Blade 中用 @vite() 替代 mix()，支持 CSS/PostCSS/Tailwind，npm run dev/build 实现快速开发与构建。

在 Laravel 中使用 Vite 进行前端资源打包，核心是替换掉旧的 Laravel Mix，利用 Vite 的原生 ES 模块支持和极速热更新能力。Laravel 9.19+ 已官方集成 Vite，只需少量配置即可启用。

初始化 Vite 配置

新项目默认已含 Vite 支持；老项目需手动安装并配置：

• 运行 npm install --save-dev vite laravel-vite-plugin
• 创建 vite.config.js 根目录下：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
<p>export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});

其中 input 指定要编译的入口文件，refresh 启用组件热更新（适用于 Inertia / Livewire）。

更新 Blade 模板引入方式

不再使用 mix()，改用 @vite() 指令：

立即学习“前端免费学习笔记（深入）”；

<!-- resources/views/app.blade.php -->
@vite(['resources/css/app.css', 'resources/js/app.js'])

开发时自动注入 HMR 脚本；构建后生成带哈希的静态资源链接，无需额外处理。

标签： css php laravel js 前端 json vite npm app ai win