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

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

发布时间 - 2025-12-16 00:00:00 点击率：次

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';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});

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

更新 Blade 模板引入方式

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


@vite(['resources/css/app.css', 'resources/js/app.js'])

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

处理 CSS 与 PostCSS（可选但推荐）

Vite 默认支持 CSS、PostCSS 和 Sass。如需 Tailwind 或自定义前缀：

确保已安装 postcss 和 autoprefixer
在 postcss.config.js 中配置：

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 中开箱即用，配置轻量、启动快、热更准，适合现代前端工作流。

# css # php # laravel # js # 前端 # json # vite # npm # app # ai # win # sass # postcss # public

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步

下一篇：如何在阿里云购买域名并搭建网站？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步

下一篇：如何在阿里云购买域名并搭建网站？