如何在Laravel 8项目中简洁安装Vue 3并解决Laravel Mix报错

报错原因 #

你遇到的Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'报错是低版本laravel-mix@6.0.6内置的webpack版本，和Vue 3所需的vue-loader依赖的webpack规则不匹配导致的，无需引入额外脚手架即可修复。

• 第一步：清理现有冲突依赖缓存
  执行命令删除存在版本冲突的依赖文件，避免缓存干扰：
  rm -rf node_modules package-lock.json yarn.lock
  Windows系统可手动删除node_modules文件夹、package-lock.json和yarn.lock文件。
• 第二步：安装适配版本的必要依赖
  仅安装运行Vue 3必须的依赖，无额外冗余内容：
  npm install laravel-mix@latest vue@next vue-loader@next @vue/compiler-sfc --save-dev
• 第三步：修正webpack.mix.js配置
  调整配置顺序并明确指定Vue版本为3：

  const mix = require('laravel-mix');
  
  mix
      .js('resources/js/app.js', 'public/js/')
      .vue({ version: 3 })
      .extract(['vue'])
      .version();
  

• 第四步：测试编译
  重新执行编译命令即可正常打包：
  npm run dev

后续你可以在resources/js/App.vue写入测试单文件组件代码，在resources/js/app.js中引入挂载，在Laravel视图文件中加入<div id="app"></div>即可验证Vue 3正常运行。

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