Laravel8+Vue3项目npm run dev报错：mix命令未识别求助

情况1：继续使用Laravel Mix（修复当前报错） #

• 重新安装依赖
  删除项目根目录的node_modules文件夹和package-lock.json文件，执行以下命令重新安装所有依赖：

  npm install
  

  确保laravel-mix的相关可执行文件被正确安装到本地依赖中。

• 修改scripts命令，用npx调用mix
  编辑package.json里的scripts字段，给所有mix命令前加上npx，避免本地命令未被识别的问题：

  {
      "private": true,
      "scripts": {
          "dev": "npm run development",
          "development": "npx mix",
          "watch": "npx mix watch",
          "watch-poll": "npx mix watch -- --watch-options-poll=1000",
          "hot": "npx mix watch --hot",
          "prod": "npm run production",
          "production": "npx mix --production"
      }
  }
  

  之后执行npm run dev即可正常运行。

• 确认webpack.mix.js配置存在
  检查项目根目录是否有webpack.mix.js文件，适配Vue3的基础配置示例：

  const mix = require('laravel-mix');
  mix.js('resources/js/app.js', 'public/js')
     .vue()
     .postCss('resources/css/app.css', 'public/css');
  

情况2：切换到Vite（适配Vue3，推荐） #

既然你目标是启动Vite，建议直接替换Laravel Mix为Vite，步骤如下：

• 安装Vite及Laravel插件

  npm install --save-dev vite laravel-vite-plugin @vitejs/plugin-vue
  

• 更新package.json的scripts
  替换原有scripts为Vite对应的命令：

  {
      "private": true,
      "scripts": {
          "dev": "vite",
          "build": "vite build",
          "preview": "vite preview"
      }
  }
  

• 创建Vite配置文件
  在项目根目录新建vite.config.js，内容如下：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: 'resources/js/app.js',
              refresh: true,
          }),
          vue({
              template: {
                  transformAssetUrls: {
                      base: null,
                      includeAbsolute: false,
                  },
              },
          }),
      ],
  });
  

• 更新模板文件的资源引用
  打开你的主Blade模板（比如resources/views/layouts/app.blade.php），替换原有的Mix引用为Vite指令：

  {{-- 替换之前的 <script src="{{ mix('js/app.js') }}"></script> --}}
  @vite('resources/js/app.js')
  

• 启动Vite开发服务器
  执行npm run dev即可正常启动Vite。

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