Vue项目中Axios 1.0.0引发import语句错误的解决求助

核心问题分析 #

Axios 1.x 开始默认采用 ESM（ECMAScript 模块）格式，而你的测试环境（大概率是 Vue CLI 默认的 Jest）默认运行在 CommonJS 环境下，直接加载 ESM 模块就会触发Cannot use import statement outside a module错误。另外，你尝试切换项目为 ESM 模式后，Vue CLI 的配置文件和 Babel 同步处理逻辑不兼容，导致新的报错。

方案一：锁定 Axios 版本（最简单直接） #

如果不需要使用 Axios 1.x，直接锁死低版本避免自动升级：

1. 在项目根目录的package.json里把 Axios 版本改为固定值，比如：

   "axios": "0.27.2"
   

2. 运行npm install生成/更新package-lock.json
3. 把package-lock.json提交到 GitHub，这样 GitHub Actions 执行安装时会严格按照锁定的版本拉取，不会自动升级到 1.x

方案二：兼容 Axios 1.x 的测试环境配置 #

如果必须使用 Axios 1.x，调整 Jest 配置让它转译 ESM 模块：

1. 在项目根目录创建/修改jest.config.js，添加transformIgnorePatterns配置，让 Jest 转译axios模块：

   module.exports = {
     // 其他已有配置...
     transformIgnorePatterns: ['/node_modules/(?!axios)/']
   }
   

   这个配置的意思是：除了axios之外，其他node_modules里的模块不转译（默认 Jest 不转译 node_modules），这样 Jest 会把 Axios 的 ESM 代码转译为 CommonJS 格式，适配测试环境。
2. 确保你的src/lib下的文件被 Jest 正确转译，Vue CLI 默认会处理src目录下的文件，无需额外配置。

方案三：修复"type": "module"引发的 Babel 错误 #

如果你之前添加了"type": "module"到根目录package.json，按以下步骤回退/修复：

1. 移除根目录package.json里的"type": "module"字段，Vue CLI 项目默认采用 CommonJS 配置模式，强行切换会引发一系列兼容问题。
2. 把vue.config.cjs改回vue.config.js，Vue CLI 只识别这个文件名的配置文件（除非你手动指定）。
3. 如果你确实需要使用 ESM 格式的配置文件，需要修改 Babel 配置为异步加载，但这会大幅增加复杂度，不推荐在 Vue CLI 项目中这么做。

为什么用require也报错？ #

Axios 1.x 的入口文件是 ESM 格式，在 CommonJS 环境下直接用require('axios')加载会失败——Node.js 不允许在 CommonJS 模块里同步加载 ESM 模块，必须用异步的import()，但测试环境一般不会支持这种写法，所以还是得靠 Jest 转译来解决。

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