laravel如何使用Laravel Mix切换到Vite_Laravel Mix切换到Vite教程

移除 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），需要先清理旧的构建工具依赖。

在项目根目录执行：

• 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中文网其它相关文章！