Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用_网络技术

Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用

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

Laravel项目中使用Vite可提升前端编译效率，相比Laravel Mix启动更快、热更新更迅速；从Laravel 9.x起默认集成Vite，需安装vite及对应插件如@vitejs/plugin-vue，并配置vite.config.js文件设置别名、输出路径和开发服务器；通过@vite指令在Blade模板中引入资源，实现开发与生产环境的无缝切换。

在 Laravel 项目中使用 Vite 进行前端资源编译，相比传统的 Laravel Mix（基于 Webpack）更加高效和现代化。Vite 利用原生 ES 模块和浏览器支持，实现了更快的开发服务器启动和热更新。以下是 Laravel 中配置和使用 Vite 的完整指南。

安装与初始化 Vite

从 Laravel 9.x 开始，新项目默认使用 Vite。如果你的项目还未配置，可以手动安装：

运行命令安装 Vite 及相关依赖：
npm install --save-dev vite @vitejs/plugin-vue @vitejs/plugin-react
安装 Laravel 提供的 Vite 辅助包：
composer require tightenco/ziggy（可选，用于路由生成）
创建 vite.config.js 配置文件

配置 vite.config.js

在项目根目录创建 vite.config.js，根据你使用的前端框架（如 Vue、React 或纯 JavaScript）进行配置。

例如，使用 Vue 3 的配置如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js'),
    },
  },
  build: {
    outDir: 'public/build',
    emptyOutDir: true,
    manifest: true,
  },
  publicDir: 'public',
  server: {
    host: 'localhost',
    port: 5173,
    hmr: {
      host: 'localhost',
    },
  },
});

关键点说明：

alias：设置路径别名，方便 JS/TS 中导入组件
build.outDir：编译后文件输出到 public/build
server.host/port：开发服务器地址

Laravel 模板中引入资源

Laravel 提供了 @vite 指令来加载开发或生产环境下的资源文件。

在 Blade 模板中使用：

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

该指令会自动判断环境：

开发模式下，引入 Vite 开发服务器（http://localhost:5173）的资源
生产模式下，加载构建后的 CSS 和 JS 文件（通过 manifest.json 查找）

运行开发与构建命令

在 package.json 中配置常用脚本：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

常用命令：

npm run dev：启动 Vite 开发服务器，支持热重载
npm run build：编译资源到 public/build 目录
npm run preview：预览生产构建效果

基本上就这些。Laravel + Vite 的组合让前端开发更轻快，配置清晰，适合现代 JS 框架集成。注意确保 .env 中的 APP_URL 与 Vite 开发服务器能正常通信，避免跨域问题。不复杂但容易忽略。

# vue # react # javascript # laravel # java # js # 前端 # composer # vite # npm

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

上一篇：无锡营销型网站制作公司,无锡网选车牌流程？

下一篇：如何在腾讯云免费申请建站？

相关栏目网站优化
网络推广
网络技术
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

上一篇：无锡营销型网站制作公司,无锡网选车牌流程？

下一篇：如何在腾讯云免费申请建站？