Laravel 8项目从Laravel Mix迁移至Vite的安装配置方法

• 移除 Laravel Mix 相关依赖
  先卸载 Laravel Mix 并删除其配置文件：

  npm remove laravel-mix
  rm webpack.mix.js
  

• 安装 Vite 与 Laravel Vite 插件
  执行命令安装所需依赖：

  npm install --save-dev vite laravel-vite-plugin
  

• 创建并配置 Vite 配置文件
  在项目根目录新建 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',
          ]),
      ],
  });
  

• 更新 package.json 中的 NPM 脚本
  替换原有 Mix 脚本为 Vite 指令，修改后的 scripts 字段如下：

  "scripts": {
      "dev": "vite",
      "build": "vite build"
  }
  

• 更新 Blade 模板的资源引入方式
  将模板中使用 mix() 助手的代码替换为 Vite 的 @vite 指令：
  原代码示例：

  <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  <script src="{{ mix('js/app.js') }}"></script>
  

  替换为：

  @vite(['resources/css/app.css', 'resources/js/app.js'])
  

  同时确保 .env 文件中的 APP_URL 配置正确，开发环境热重载依赖该地址。

• 清理旧编译资源（可选）
  删除 public/js、public/css 目录下由 Laravel Mix 生成的旧文件，避免资源混淆。

• 测试迁移效果

  • 开发环境：运行 npm run dev 启动 Vite 服务，同时启动 Laravel 应用，检查页面资源加载情况。
  • 生产环境：运行 npm run build 编译资源，检查 public/build 目录是否生成对应文件，页面能否正常加载。

内容的提问来源于stack exchange，提问作者Arqiboi