Vue3配置Axios编译报错求助：Module parse failed异常

问题分析 #

报错显示axios/lib/platform/index.js里的扩展运算符...无法被Webpack解析，核心原因是Webpack默认不会转译node_modules目录下的代码，当前安装的axios版本使用了未转译的ES6语法，而项目Babel配置未覆盖该依赖，导致编译失败。

解决方案 #

方案1：Vue CLI项目快速修复（推荐） #

修改项目根目录的babel.config.js，将axios加入transpileDependencies列表，让Babel转译该依赖：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  transpileDependencies: ['axios']
}

方案2：手动配置Webpack的项目 #

在webpack.config.js的module.rules中调整babel-loader规则，排除node_modules但例外处理axios：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules(?!\/axios)/,
        use: 'babel-loader'
      }
    ]
  }
}

方案3：降级axios版本（不推荐） #

安装兼容旧版语法的axios版本，跳过转译需求：

npm install axios@0.27.2 --save

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