移除 Laravel Mix 依赖并删除 webpack.mix.js 文件；2. 安装 Vite 及 laravel/vite-plugin 并发布配置文件；3. 配置 vite.config.js 中的入口文件；4. 在 Blade 模板中替换为 @vite 指令；5. 更新 package.json 脚本为 Vite 命令；6. 解决 CSS、静态资源路径和 HMR 等常见问题。切换后显著提升开发服务器启动与热更新速度，便于项目长期维护。
从 Laravel Mix 切换到 Vite 是 Laravel 项目现代化构建流程的重要一步。Vite 提供了更快的开发服务器启动速度和热更新体验，尤其在大型项目中优势明显。以下是将 Laravel 项目中原本使用 Laravel Mix 的前端构建方式迁移到 Vite 的完整步骤。
1. 移除 Laravel Mix 相关依赖
如果你当前项目使用的是 Laravel Mix（基于 Webpack），需要先清理旧的构建工具依赖。
说明： Laravel Mix 的核心依赖是 laravel-mix 和 webpack 系列包，这些与 Vite 冲突，必须移除。
在项目根目录执行：
npm uninstall laravel-mix webpack webpack-cli webpack-dev-server cross-env
同时删除项目中的 webpack.mix.js 文件：
rm webpack.mix.js
2. 安装 Vite 及 Laravel 支持库
Laravel 官方提供了 laravel/vite-plugin 来无缝集成 Vite。
安装 Vite 和 Laravel 插件：
npm install --save-dev vite @vitejs/plugin-vue @vitejs/plugin-react（根据你使用的前端框架选择） composer require laravel/vite-plugin
发布 Vite 配置文件：
php artisan vendor:publish --tag=vite-config
这会生成 vite.config.js 文件，用于配置 Vite 行为。
3. 更新 vite.config.js 配置
默认生成的 vite.config.js 已经适配 Laravel，常见配置如下：
import { defineConfig } from 'vite';import laravel from 'laravel-vite-plugin';export default defineConfig({ plugins: [ laravel([ 'resources/css/app.css', 'resources/js/app.js', ]), ],});
你可以根据需要添加更多入口文件，比如 Vue 或 React 的主文件。
4. 修改 Blade 模板中的资源引入
这是关键一步：替换 Mix 的 @vite 指令。
Swapface人脸交换
一款创建逼真人脸交换的AI换脸工具
45 查看详情
打开你的主布局文件（如 resources/views/layouts/app.blade.php），找到原来 Mix 的写法：
@vite(['resources/css/app.css', 'resources/js/app.js'])
注意：Laravel 已自动注册 @vite 指令，无需手动添加。
确保生产环境能正确加载编译后的资源。Vite 会在 public/build 目录下生成 manifest 文件。
5. 调整 package.json 脚本
将原来的 Mix 脚本替换为 Vite 命令。
修改 package.json 中的 scripts：
"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview"}
开发时运行：
npm run dev 启动 Vite 开发服务器
生产环境构建：
npm run build 编译资源
6. 处理常见问题
迁移过程中可能遇到的问题及解决方法：
CSS 不生效：确认 CSS 文件在 vite.config.js 入口列表中，并且 JS 文件正确导入了 CSS（如 import '../css/app.css'） 图片或字体路径错误：Vite 对静态资源处理更严格，建议将静态资源放入 public/ 目录，或使用 import 引入后由 Vite 处理 HMR 不工作：检查开发服务器是否通过 http://localhost:5173 访问，并确保没有缓存问题
基本上就这些。切换后你会感受到明显的启动和热重载速度提升，尤其是当项目变大时。Vite 已成为 Laravel 推荐的现代前端构建工具，尽早迁移有利于长期维护。
以上就是laravel如何使用Laravel Mix切换到Vite_Laravel Mix切换到Vite教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/418782.html
微信扫一扫 
支付宝扫一扫 
