laravel怎么使用Vite打包前端资源_laravel Vite前端资源打包教程_网络技术

laravel怎么使用Vite打包前端资源_laravel Vite前端资源打包教程

发布时间 - 2025-10-30 00:00:00 点击率：次

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() 插件并调整入口文件。