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 支持；老项目需手动安装并配置：
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）。
不再使用 mix()，改用 @vite() 指令：
立即学习“前端免费学习笔记（深入）”；
<!-- resources/views/app.blade.php --> @vite(['resources/css/app.css', 'resources/js/app.js'])
开发时自动注入 HMR 脚本；构建后生成带哈希的静态资源链接，无需额外处理。
Vite 默认支持 CSS、PostCSS 和 Sass。如需 Tailwind 或自定义前缀：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Tailwind 用户还需在 resources/css/app.css 中加入 @tailwind base; @tailwind components; @tailwind utilities;。
开发与构建命令如下：
npm run dev（启动 Vite 开发服务，自动代理到 Laravel）npm run build（输出到 public/build/，自动更新引用）npm run preview
构建后资源路径由 Vite 自动管理，@vite() 会读取 manifest.json 确保正确加载哈希文件。
基本上就这些。Vite 在 Laravel 中开箱即用，配置轻量、启动快、热更准，适合现代前端工作流。
以上就是Laravel如何使用Vite进行前端资源打包？（配置示例）的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
960
收藏
