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 】
相关推荐:
js实现获取鼠标当前的位置
微信公众帐号开发教程之图文消息全攻略
laravel怎么通过契约(Contracts)编程_laravel契约(Contracts)编程方法
如何在阿里云通过域名搭建网站?
邀请函制作网站有哪些,有没有做年会邀请函的网站啊?在线制作,模板很多的那种?
如何选择PHP开源工具快速搭建网站?
Firefox Developer Edition开发者版本入口
如何在IIS7上新建站点并设置安全权限?
js实现点击每个li节点,都弹出其文本值及修改
如何利用DOS批处理实现定时关机操作详解
Python进程池调度策略_任务分发说明【指导】
html文件怎么打开证书错误_https协议的html打开提示不安全【指南】
Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】
python中快速进行多个字符替换的方法小结
公司网站制作价格怎么算,公司办个官网需要多少钱?
Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】
🚀拖拽式CMS建站能否实现高效与个性化并存?
悟空识字如何进行跟读录音_悟空识字开启麦克风权限与录音
Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】
如何使用 Go 正则表达式精准提取括号内首个纯字母标识符(忽略数字与嵌套)
html5源代码发行怎么设置权限_访问权限控制方法与实践【指南】
Python3.6正式版新特性预览
JS中对数组元素进行增删改移的方法总结
Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】
ChatGPT 4.0官网入口地址 ChatGPT在线体验官网
Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】
用yum安装MySQLdb模块的步骤方法
Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用
手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站?
如何基于PHP生成高效IDC网络公司建站源码?
微信小程序 input输入框控件详解及实例(多种示例)
Java垃圾回收器的方法和原理总结
简单实现Android验证码
如何在腾讯云服务器快速搭建个人网站?
Android自定义listview布局实现上拉加载下拉刷新功能
laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法
中山网站推广排名,中山信息港登录入口?
jQuery validate插件功能与用法详解
Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议
php 三元运算符实例详细介绍
Laravel Octane如何提升性能_使用Laravel Octane加速你的应用
Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧
如何快速重置建站主机并恢复默认配置?
Java Adapter 适配器模式(类适配器,对象适配器)优缺点对比
PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】
Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】
php485函数参数是什么意思_php485各参数详细说明【介绍】
Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程
Laravel用户密码怎么加密_Laravel Hash门面使用教程
利用JavaScript实现拖拽改变元素大小
下一篇:如何在腾讯云免费申请建站?
下一篇:如何在腾讯云免费申请建站?


preview:预览生产构建效果