Vite从Laravel 9起正式取代Mix成为默认构建工具，必须停用Mix以避免端口冲突、HMR失效和资源路径错乱；迁移需四步：彻底卸载Mix并删除配置文件、安装Vite及插件、正确配置vite.config.js入口、替换Blade中@mix为@vite指令。
从 Laravel 9 开始，Vite 正式取代 Laravel Mix 成为官方默认前端构建工具；Laravel 10 和 11 沿用了这一决策，并持续优化 Vite 集成体验。切换不是“可选项”，而是项目现代化和长期可维护的关键动作——Mix 已停止新特性开发，Vite 则获得 Laravel 核心团队深度适配与文档支持。
为什么必须停用 Mix、不能共存
Vite 和 Mix 是两套完全不同的构建模型：Mix 基于 Webpack 全量预打包，Vite 基于浏览器原生 ESM 按需编译。二者同时运行会导致：
- 开发服务器端口冲突（Mix 默认 :8080，Vite 默认 :5173）
- HMR（热更新）互相干扰，修改 JS/CSS 后页面不刷新或白屏
- public 目录下生成的资源路径错乱（如 mix-manifest.json 与 manifest.json 混用）
- @vite 指令在开发时依赖 Vite 的本地代理服务，若 Mix 进程残留，会拦截请求导致 404
迁移四步核心操作
迁移本质是“清理→安装→配置→验证”，每步不可跳过：
-
彻底移除 Mix：运行
npm uninstall laravel-mix webpack webpack-cli webpack-dev-server cross-env，并手动删除webpack.mix.js和public/mix-manifest.json -
安装 Vite 生态：执行
npm install --save-dev vite @vitejs/plugin-vue @vitejs/plugin-react laravel-vite-plugin（按需选装 Vue/React 插件），再运行composer require laravel/vite-plugin -
配置 vite.config.js：确保入口路径与实际文件一致，例如：
laravel(['resources/css/app.css', 'resources/js/app.js'])
多个入口（如 Vue 单文件组件）需显式列出，不支持 glob 通配 -
更新 Blade 和脚本：在布局模板中将
@mix('js/app.js')或@vite(['...'])替换为标准写法@vite(['resources/css/app.css', 'resources/js/app.js'])；同步修改package.json中的 scripts："dev": "vite""build": "vite build"
Laravel 10–11 的增强支持点
相比 Laravel 9 初始集成，后续版本在工程体验上做了实质性升级：
立即学习“前端免费学习笔记（深入）”；
- 内置更健壮的
laravel-vite-plugin错误提示，比如入口路径不存在时直接报红，不再静默失败 - 自动识别 Tailwind CSS 配置，无需额外配置 PostCSS（只要
resources/css/app.css中正确@import了 Tailwind 的 base、components、utilities） - Laravel 11 引入
vite-plugin-laravel（替代旧版插件），支持更灵活的路由预加载与 SSR 兼容模式 - Artisan 命令增强：
php artisan vite:install可一键生成配置骨架（Laravel 11+）
常见问题快速排查
部署后页面空白或样式丢失？优先检查这三项：
- 运行
npm run build后，确认public/build/manifest.json文件存在且内容非空 - 检查
vite.config.js中build.outDir是否为'public/build'，并与config/vite.php中的'build_directory'值保持一致 - 开发时访问页面，打开浏览器控制台，看是否有
Failed to fetch请求指向http://localhost:5173/...—— 若有，说明 Vite 开发服务器未启动或被防火墙拦截
