运行npm run dev时提示找不到vue-loader模块的问题求助

问题根源 #

1. Laravel Mix的.vue()方法已经自动配置了vue-loader和VueLoaderPlugin，你手动添加的重复配置不仅多余，还因为没安装vue-loader依赖触发报错。
2. Vue版本依赖冲突：你安装的是Vue3，但用了Vue2专属的vue-template-compiler；同时bootstrap-vue@2.x只支持Vue2，和Vue3不兼容。

解决步骤 #

1. 简化webpack.mix.js配置

删除手动添加的vue-loader相关配置，Laravel Mix会自动处理Vue文件的编译。修改后的配置如下：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .vue()
   .webpackConfig({
      module: {
         rules: [
            {
               test: /\.js$/,
               exclude: /(node_modules|bower_components)/,
               use: {
                  loader: 'babel-loader',
                  options: {
                     presets: ['@babel/preset-env']
                  }
               }
            },
            {
               test: /\.css$/,
               use: ['style-loader', 'css-loader']
            }
         ]
      }
   });

2. 修复Vue依赖版本

卸载不兼容的依赖，安装Vue3适配的包：

# 移除Vue2编译器和旧版bootstrap-vue
npm uninstall vue-template-compiler bootstrap-vue

# 安装Vue3专属编译器和兼容Vue3的bootstrap-vue-next
npm install --save-dev @vue/compiler-sfc
npm install bootstrap-vue-next

3. 清理缓存并重新安装依赖

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json

# 清理npm缓存
npm cache clean --force

# 重新安装所有依赖
npm install

4. 重新启动开发服务

npm run dev

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