Vite是Laravel应用的理想前端构建工具，提供快速热更新与现代化模块支持。首先通过npm和composer安装Vite及laravel-vite-plugin，运行php artisan vite:install生成配置文件；随后在vite.config.js中引入laravel插件并根据框架选择vue或react插件，配置资源入口；接着在Blade模板的head标签内使用@vite指令引入CSS和JS文件；开发时执行npm run dev启动Vite服务器，实现本地热重载；最后通过npm run build将资源打包至public/build目录，生成manifest.json供生产环境版本化引用，完成高效资源管理。
如果您在开发 Laravel 应用时希望使用现代化的前端构建工具来高效打包资源文件，Vite 是一个理想的选择。它提供了极快的热更新和现代化的模块化支持，能显著提升开发体验。
本文运行环境：MacBook Pro，macOS Sonoma
一、安装并配置 Vite
Vite 需要通过 Node.js 进行安装，并集成到 Laravel 项目中。Laravel 自 9.x 版本起已默认支持 Vite，无需额外引入其他构建工具。
1、打开终端，进入 Laravel 项目根目录，运行以下命令安装 Vite 及其 Laravel 插件：
立即学习“前端免费学习笔记（深入）”；
npm install @vitejs/plugin-vue @vitejs/plugin-react –save-dev
2、确保项目中已安装 laravel-vite-plugin：
composer require laravel/vite
3、发布 Vite 配置文件：
php artisan vite:install
二、修改 vite.config.js 配置文件
该配置文件用于定义资源入口、插件加载以及开发服务器行为。正确配置可确保资源被正确编译和引用。
1、打开项目根目录下的 vite.config.js 文件。
2、根据前端框架选择对应的插件。若使用 Vue，则添加 Vue 插件：
import { defineConfig } from ‘vite’;
import laravel from ‘laravel-vite-plugin’;
import vue from ‘@vitejs/plugin-vue’;
export default defineConfig({
plugins: [
laravel({
input: [‘resources/css/app.css’, ‘resources/js/app.js’],
refresh: true,
}),
vue(),
],
});
3、若使用 React，则替换为 react() 插件并调整入口文件。
三、更新 Blade 模板以支持 Vite
Laravel 的 Vite 插件提供了一个辅助函数 @vite，用于在页面中动态加载开发或生产环境的资源链接。
豆包AI编程
豆包推出的AI编程助手
483 查看详情 
1、打开主布局文件，通常位于 resources/views/layouts/app.blade.php。
2、在 标签内添加：
@vite([‘resources/css/app.css’, ‘resources/js/app.js’])
3、确保页面引入顺序正确，CSS 在前，JS 在后。
四、启动 Vite 开发服务器
在开发过程中，Vite 提供了基于本地服务器的快速热重载功能，极大提升调试效率。
1、运行以下命令启动 Vite 开发服务：
npm run dev
2、该命令会监听资源变化并自动重新编译。
3、访问 Laravel 应用时，资源将通过 localhost:5173 动态加载。
五、构建生产环境资源
当应用准备部署时，需要将前端资源进行压缩和打包，生成静态文件供生产环境使用。
1、执行构建命令：
npm run build
2、Vite 会将资源输出到 public/build 目录下（可配置）。
3、生成的 manifest.json 文件会被 Laravel 读取，以正确解析版本化资源路径。
以上就是laravel怎么使用Vite打包前端资源_laravel Vite前端资源打包教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/367904.html
微信扫一扫 
支付宝扫一扫 
