webpack 打包后，部分低版本浏览器报错无法识别axios？

Question

axios 版本从最高降到1.6.0 还是无法显示出页面，是否是babel的配置有问题呢？
.baelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "ie >=9",
            "chrome >= 48",
            "android >= 4.4",
            "ios >= 9",
            "safari >= 7"
          ]
        },
        "useBuiltIns": "usage",
        "corejs": 3.37
      }
    ]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

webpack.config.js

    module: {
        rules: [
            {
                test: /\.m?js$/, // 匹配 .js 或 .mjs 文件
                exclude: /node_modules/, // 排除 node_modules 目录（可选，根据实际情况调整）
                use: {
                    loader: 'babel-loader',
                },
            },
        ]
    }

package.json

{
  "scripts": {
    "babel": "npx babel src --out-dir lib",
    "dev": "npx webpack --config webpack.config.js --mode dev",
    "watch": "npx webpack --config webpack.config.js --mode dev --watch",
    "start:dev": "npx cross-env envMode=dev webpack serve --open --mode development",
    "start:test": "npx cross-env envMode=test webpack serve --open --mode development",
    "build:test": "npx cross-env envMode=test webpack --config webpack.config.js --mode development",
    "build:stage": "npx cross-env envMode=stage webpack --config webpack.config.js --mode production",
    "build": "npx cross-env envMode=prod webpack --config webpack.config.js --mode production",
    "analyze": "npx cross-env envMode=prod webpack --config webpack.config.js --mode production --analyze"
  },
  "devDependencies": {
    "@babel/core": "^7.24.4",
    "@babel/plugin-transform-runtime": "^7.24.3",
    "@babel/preset-env": "^7.24.4",
    "@vue/compiler-sfc": "^3.4.25",
    "autoprefixer": "^10.4.19",
    "babel-cli": "^6.26.0",
    "babel-loader": "^9.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^7.1.1",
    "dotenv": "^16.4.5",
    "html-webpack-plugin": "^5.6.0",
    "image-minimizer-webpack-plugin": "^4.0.0",
    "imagemin": "^8.0.1",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^10.0.1",
    "mini-css-extract-plugin": "^2.9.0",
    "postcss": "^8.4.38",
    "postcss-loader": "^8.1.1",
    "postcss-px-to-viewport": "^1.1.1",
    "sass": "^1.75.0",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0",
    "vue-loader": "^17.3.1",
    "webpack": "^5.91.0",
    "webpack-bundle-analyzer": "^4.10.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  },
  "dependencies": {
    "axios": "^1.6.0",
    "core-js": "^3.37.0",
    "default-passive-events": "^2.0.0",
    "jquery": "^3.7.1",
    "vconsole": "^3.15.1",
    "vue": "^3.4.25",
    "weixin-js-sdk": "^1.6.5"
  }
}

Answer 1

参考这个vue文档中transpileDependencies配置项的描述,

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。

所以你的axios没有通过bable转译,在低版本的浏览器中就报错了.

建议参考文档在vue.config.js的配置的transpileDependencies配置项中加上axios

module.exports = {
  // ...其他配置略
  transpileDependencies: [
    "axios"
  ]
  // ...其他配置略
}

如果没有vue-config.js,参考这个文章也行