Vue 3项目引入第三方JS库时Webpack Loader适配问题求助

方法1：通过Vue CLI配置转译指定依赖 #

Vue CLI自带transpileDependencies配置项，专门用来指定需要Babel转译的第三方依赖——默认情况下它会跳过所有node_modules里的文件，所以我们需要把Qalendar、VCalendar加入这个列表：

1. 在项目根目录创建或修改vue.config.js（没有的话直接新建）：

module.exports = {
  transpileDependencies: ['qalendar', 'vcalendar']
}

2. 重启开发服务器，重新构建项目即可。这个配置会让Webpack处理这两个包时自动用Babel转译，解析ES2020语法。

方法2：直接修改Babel配置文件 #

如果方法1不生效，可以调整babel.config.js里的预设配置，明确指定要转译的库路径：

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      include: [
        /node_modules\/qalendar/,
        /node_modules\/vcalendar/
      ]
    }]
  ]
}

额外检查项 #

• 确保@vue/cli-service版本和Vue 3.3.4兼容，建议更新到对应版本（比如执行npm install @vue/cli-service@~5.0.0，Vue 3.3.x适配Vue CLI 5系列）。
• 若上述配置仍无效，可手动安装ES2020语法对应的Babel插件并添加到配置：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
}

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