Laravel Mix配置Vue3时Fragment报错及vue依赖解析失败问题

解决方案 #

1. 解决Can't resolve 'vue'报错

出现该报错的原因是你当前项目安装的是Vue2相关依赖，Laravel Mix指定使用Vue3后找不到对应版本的安装包，按以下步骤操作即可：

• 先卸载项目中已有的Vue2相关依赖：

npm uninstall vue vue-template-compiler
# 若使用yarn则执行
yarn remove vue vue-template-compiler

• 安装Vue3对应的核心依赖和编译工具：

npm install vue@3 @vue/compiler-sfc --save-dev
# 若使用yarn则执行
yarn add vue@3 @vue/compiler-sfc --dev

2. 修正Laravel Mix配置

你不需要在每次调用.vue()时都指定版本，仅需要在第一次调用时传入version: 3参数即可，修正后的配置如下：

const mix = require("laravel-mix");
mix
  .js("src/js/index.js", "dist/js")
  .vue({ version: 3 }) // 仅需在此处指定Vue3版本，后续调用.vue()会继承该配置
  .version()
  .js("src/js/popup.js", "dist/js")
  .vue()
  .version()
  .js("src/js/background.js", "dist/js")
  .version()
  .sass("src/css/main.scss", "dist/css")
  .sass("src/css/popup.scss", "dist/css")
  .copy("src/assets", "dist/assets")
  .copy("src/html", "dist/html")
  .copy("src/manifest.json", "dist")
  .setPublicPath("./")
  .options({ processCssUrls: false });

3. 验证升级结果

重新执行打包命令后运行项目，原有的多根节点报错会自动消失，你现有的模板代码无需额外调整。如果需要确认当前使用的Vue版本，可以在项目入口JS文件中添加console.log(Vue.version)，控制台输出3.x.x即代表升级成功。

注意：如果你的项目中还用到了Vue生态的其他依赖（如vue-router、vuex等），需要同步升级到支持Vue3的对应版本，否则可能出现兼容问题。

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