laravel怎么将现有的Laravel Mix项目迁移到Vite_laravel Mix项目迁移到Vite方法-Laravel-PHP中文网

从Laravel 9开始Vite成为默认构建工具。需安装vite和laravel-vite-plugin，创建vite.config.js配置文件，替换Blade中@mix为@vite，更新package.json脚本为vite命令，移除laravel-mix相关依赖，调整静态资源路径至public或动态引入，最后运行npm run dev启动开发服务器并构建测试。

laravel怎么将现有的laravel mix项目迁移到vite_laravel mix项目迁移到vite方法

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';
<p>export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});</p>

根据你的实际入口文件路径调整数组中的路径。比如你有多个 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"
}

如果需要启用热重载开发服务器，可以使用：

React 组件生成器

根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。

下载

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 模板和资源路径的调整。完成之后，你会感受到明显的编译速度提升。