从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-plugin
- npm 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"
}
如果需要启用热重载开发服务器，可以使用：
- 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 模板和资源路径的调整。完成之后，你会感受到明显的编译速度提升。
