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 的完整指南。
从 Laravel 9.x 开始，新项目默认使用 Vite。如果你的项目还未配置，可以手动安装：
在项目根目录创建 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',
},
},
});
关键点说明：
立即学习“前端免费学习笔记（深入）”；
Laravel 提供了 @vite 指令来加载开发或生产环境下的资源文件。
在 Blade 模板中使用：<@vite(['resources/js/app.js', 'resources/css/app.css'])
该指令会自动判断环境：
在 package.json 中配置常用脚本：
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
常用命令：
基本上就这些。Laravel + Vite 的组合让前端开发更轻快，配置清晰，适合现代 JS 框架集成。注意确保 .env 中的 APP_URL 与 Vite 开发服务器能正常通信，避免跨域问题。不复杂但容易忽略。
以上就是Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
602
