webpack 打包后,部分低版本浏览器报错无法识别axios?-灵析社区

我爱上班

![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240928/c1b1a7c255bd10ff5fc099a0295e183c.png) 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" } }

阅读量:174

点赞量:0

问AI
参考这个vue文档中"transpileDependencies配置项的描述" (https://link.segmentfault.com/?enc=uxylvbd84DcnVht5EuqxfQ%3D%3D.Ped3y9GR9vPvqSoPSGBcVLBa0SxItWZCP7i7%2BhRjnCe0Z65ux0yLWC9AtAuhfyFUf6sRvvIhZNfMrya1vSBPvw%3D%3D), «默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项,以避免构建后的代码中出现未转译的第三方依赖。» 所以你的"axios"没有通过"bable"转译,在低版本的浏览器中就报错了. 建议参考文档在"vue.config.js"的配置的"transpileDependencies"配置项中加上"axios" module.exports = { // ...其他配置略 transpileDependencies: [ "axios" ] // ...其他配置略 } 如果没有"vue-config.js",参考"这个文章" (https://link.segmentfault.com/?enc=C5dLIB2v9ac5G4%2F3DQi1ag%3D%3D.d%2BtMHWXYIz1Bw8O3Eh%2BD9BQfo2Zow3uAxtgPuRMHwynNLzULkXHKlF5FhWXNkR3aW%2BN%2F%2BrxkU3dEqp%2F3xagDmxdL%2BB1JfDH6PQquzC59BQ9Xc1ygorNm%2Bw6pb8MKO3wnslcRrOwbpiQougmunvW7AA%3D%3D)也行