Vue CLI编译vagmi库失败，报Unexpected token错误求助

问题原因 #

错误中的??是ES2020的空值合并运算符，Vue CLI基于webpack构建，默认不会转译node_modules目录下的第三方包，导致webpack的loader无法识别该语法，从而抛出解析失败的错误。而Vite默认支持现代ES语法，所以能正常运行vagmi。

解决方案 #

方案1：配置Vue CLI转译vagmi包 #

在项目根目录的vue.config.js中添加transpileDependencies配置，指定让babel转译vagmi：

module.exports = {
  transpileDependencies: ['vagmi']
}

添加后重启开发服务器，webpack会通过babel-loader将vagmi中的ES2020语法转译为兼容的版本，即可正常编译。

方案2：升级Vue CLI到最新稳定版 #

如果你的Vue CLI版本较旧（如@vue/cli < 4.5），默认的babel预设可能未支持ES2020语法。先升级CLI：

# 全局升级
npm update @vue/cli -g
# 或项目内更新cli-service
npm update @vue/cli-service

升级完成后再配合方案1的transpileDependencies配置使用，确保语法转译正常。

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