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


相关推荐: Laravel中DTO是什么概念_在Laravel项目中使用数据传输对象(DTO)  黑客入侵网站服务器的常见手法有哪些?  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  利用JavaScript实现拖拽改变元素大小  php中::能调用final静态方法吗_final修饰静态方法调用规则【解答】  Laravel distinct去重查询_Laravel Eloquent去重方法  html如何与html链接_实现多个HTML页面互相链接【互相】  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  奇安信“盘古石”团队突破 iOS 26.1 提权  微信h5制作网站有哪些,免费微信H5页面制作工具?  Laravel如何使用Socialite实现第三方登录?(微信/GitHub示例)  简历没回改:利用AI润色让你的文字更专业  ,南京靠谱的征婚网站?  bing浏览器学术搜索入口_bing学术文献检索地址  如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体  微信小程序 canvas开发实例及注意事项  如何用低价快速搭建高质量网站?  专业商城网站制作公司有哪些,pi商城官网是哪个?  网站优化排名时,需要考虑哪些问题呢?  如何在阿里云通过域名搭建网站?  JavaScript实现Fly Bird小游戏  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  教你用AI将一段旋律扩展成一首完整的曲子  什么是javascript作用域_全局和局部作用域有什么区别?  Laravel如何生成API文档?(Swagger/OpenAPI教程)  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  如何在云虚拟主机上快速搭建个人网站?  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符(忽略数字与嵌套)  如何选择PHP开源工具快速搭建网站?  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  如何正确下载安装西数主机建站助手?  香港服务器网站测试全流程:性能评估、SEO加载与移动适配优化  Laravel如何使用软删除(Soft Deletes)功能_Eloquent软删除与数据恢复方法  Laravel如何编写单元测试和功能测试?(PHPUnit示例)  Laravel如何创建自定义Facades?(详细步骤)  LinuxShell函数封装方法_脚本复用设计思路【教程】  ,在苏州找工作,上哪个网站比较好?  如何在IIS7中新建站点?详细步骤解析  如何快速搭建个人网站并优化SEO?  Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程  学生网站制作软件,一个12岁的学生写小说,应该去什么样的网站?  如何在建站宝盒中设置产品搜索功能?  Laravel怎么上传文件_Laravel图片上传及存储配置  企业网站制作这些问题要关注  UC浏览器如何设置启动页 UC浏览器启动页设置方法  网站制作企业,网站的banner和导航栏是指什么?  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】