从Laravel 9开始Vite成为默认构建工具。需安装vite和laravel-vite-plugin，创建vite.config.js配置文件，替换Blade中@mix为@vite，更新package.json脚本为vite命令，移除laravel-mix相关依赖，调整静态资源路径至public或动态引入，最后运行npm run dev启动开发服务器并构建测试。
Laravel Mix 是基于 Webpack 的前端构建工具，而 Vite 作为新一代构建工具，凭借其更快的启动速度和热更新效率，逐渐成为 Laravel 官方推荐的默认方案。从 Laravel 5.8 开始支持 Vite，并在 Laravel 9 及以后版本中作为默认构建工具。如果你正在使用 Laravel Mix，想迁移到 Vite，以下是完整的迁移步骤。
1. 确认 Laravel 版本并安装 Vite
确保你的 Laravel 项目版本 >= 8（建议升级到 9 或更高以获得最佳支持）。
运行以下命令安装 Vite 和 Laravel 的官方 Vite 插件：
npm install –save-dev vite laravel-vite-pluginnpm install –save-dev @vitejs/plugin-vue npm install –save-dev @vitejs/plugin-react
2. 创建 vite.config.js 配置文件
在项目根目录创建 vite.config.js 文件：
import { defineConfig } from 'vite';import laravel from 'laravel-vite-plugin';export default defineConfig({plugins: [laravel(['resources/css/app.css','resources/js/app.js',]),],});
根据你的实际入口文件路径调整数组中的路径。比如你有多个 JS 或 CSS 文件，也可以一并添加。
3. 替换 Blade 模板中的 Mix 辅助函数
打开你的 Blade 模板（通常是 resources/views/layouts/app.blade.php），将原来使用 @mix 或 mix() 的地方替换为 @vite 或 @viteReactRefresh。
例如，将：
@vite(['resources/css/app.css', 'resources/js/app.js'])
这会自动注入 Vite 的开发服务器脚本或生产环境下的资源链接。
开发环境下，Vite 会启动一个本地服务器（如 http://localhost:5173），自动处理模块请求。
4. 修改 package.json 脚本
将原来的 npm 脚本从 Mix 切换到 Vite：
"scripts": { "dev": "vite", "build": "vite build"}
如果需要启用热重载开发服务器，可以使用：
Fireflies.ai
自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。
99 查看详情 npm run dev # 启动 Vite 开发服务器npm run build # 构建生产资源
5. 移除 Laravel Mix 相关依赖和配置
删除 webpack.mix.js 文件。
卸载不再需要的包：
npm remove laravel-mix webpack webpack-cli
同时清理 package.json 中与 Mix/webpack 相关的其他插件（如 sass-loader、css-minimizer-webpack-plugin 等）。
6. 处理静态资源引用问题
Vite 对静态资源的处理方式与 Webpack 不同。图片、字体等应放在 public/ 目录下，或通过动态导入引入。
例如，在 JS 中引用图像：
import imageUrl from './images/logo.png';
或者直接使用 /storage/image.png 这类公共路径。
7. 构建并测试
运行开发模式：
npm run dev
访问页面，确认没有 404 或 CORS 错误。生产环境构建：
npm run build
构建后检查 public/build/ 目录是否生成了正确的资源文件（Vite 默认输出到 public/assets）。
基本上就这些。迁移过程不复杂但容易忽略细节，尤其是 Blade 模板和资源路径的调整。完成之后，你会感受到明显的编译速度提升。
以上就是laravel怎么将现有的Laravel Mix项目迁移到Vite_laravel Mix项目迁移到Vite方法的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/830273.html
微信扫一扫 
支付宝扫一扫 
