Laravel Vite如何正确配置和打包前端资源

在 Laravel 项目中使用 Vite 进行前端资源的配置和打包，能显著提升开发体验和构建效率。Vite 取代了传统的 Mix，利用现代浏览器原生 ES 模块支持，实现快速热更新和按需编译。

安装与基础配置

Laravel 新版本默认集成 Vite，若未包含，可通过 Composer 和 NPM 安装：

• 安装依赖：运行 composer require laravel/vite 和 npm install
• 创建 vite.config.js：在项目根目录下生成配置文件，Laravel 提供了基本模板
• 引入 Vite 指令：在 Blade 模板中使用 @vite(['resources/css/app.css', 'resources/js/app.js'])

该指令会自动注入开发服务器链接或生产环境的静态资源路径。

开发环境运行

启动 Vite 开发服务器：

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

• 执行 npm run dev，Vite 会监听 3000 端口（可配置）
• 页面加载时，JS/CSS 资源通过本地服务动态加载，支持 HMR（热模块替换）
• 确保 APP_URL 与访问地址一致，避免跨域问题

开发过程中无需手动刷新，修改文件后浏览器自动更新。

GPTKit

一个AI文本生成检测工具

108

查看详情

生产环境构建

打包前端资源用于部署：

• 运行 npm run build，Vite 将资源输出到 public/build
• 生成带哈希的文件名，实现缓存 busting
• Blade 中的 @vite 指令自动读取 manifest 文件，映射正确路径

构建完成后，所有资源均可通过 CDN 或静态服务器直接提供。

常见问题与优化建议

实际使用中可能遇到的问题及解决方式：

• 代理配置：若 Laravel 与 Vite 端口不同，可在 vite.config.js 中设置 server.proxy 指向后端
• 资源路径错误：检查 build.outDir 和 publicDir 配置是否匹配 Laravel 结构
• 第三方库引入慢：Vite 会预构建依赖，首次启动稍慢属正常现象
• 多入口应用：可在 @vite 中传入多个资源路径，适用于管理后台与前台分离场景

基本上就这些。只要配置正确，Vite 在 Laravel 中表现稳定且高效。