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

admin 百科 2025-12-17 14

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

Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用-第1张图片-佛山资讯网

在 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',
    },
  },
});

登录后复制

关键点说明：

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