html5 - H5 webapck 打包后，在低版本浏览器，页面无法显示？

Question

H5 webapck 打包后，在低版本浏览器，页面无法显示？
定位到问题代码行数，是 axios请求有问题，这种要怎么兼容？

import "core-js/features/object/from-entries";import "core-js/features/array/flat";import 'core-js/features/promise';import "core-js/stable";import "regenerator-runtime/runtime";import axios from 'axios';var encodeUri = encodeURIComponent(location.href);async function getConfigInfo() {    const encodeUriParams = encodeUri ? encodeUri : '';    const strParams = JSON.stringify({        url: encodeUriParams    })     await axios.post('http:xxx',strParams); // 加上这一行就显示错误}

webpack.config.js里面的配置

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

.babelrc 里面的配置

{  "presets": [    [      "@babel/preset-env",      {        "targets": {          "browsers": [            "IE >= 9",            "Chrome >= 49",            "Android >= 4.4",            "iOS >= 9",            "last 2 versions"          ]        },        "useBuiltIns": "usage",        "corejs": 3.37      }    ]  ],  "plugins": ["@babel/plugin-transform-runtime"]}

Answer 1

对于您的问题，关于H5 webpack打包后在低版本浏览器页面无法显示，并且定位到问题代码行数与axios请求有关，以下是一些可能的解决方案和解释：

1. 确保axios兼容性问题

• Polyfill：axios本身可能不需要polyfill，但如果你在低版本浏览器中遇到问题，可能是因为axios依赖了某些现代JavaScript特性。确保你的Babel配置（如.babelrc）和polyfill（如core-js）正确设置了，以便转换和添加必要的代码来兼容低版本浏览器。

2. 检查encodeURIComponent和JSON.stringify

• encodeURIComponent：这个函数在大多数现代浏览器中都是可用的，但如果你在IE9这样的老浏览器中遇到问题，请确保你的polyfill库包含了相关的polyfill。
• JSON.stringify：同样，这个函数在大多数现代浏览器中都是可用的，但为了确保兼容性，你可能需要确保polyfill库包含了它。

3. 检查webpack配置

• Babel Loader：确保你的webpack配置中的babel-loader正确无误，并且能够处理你的代码。
• Entry Point：确保你的入口点（entry point）设置正确，webpack能够正确地找到并打包你的代码。

4. 调试和错误排查

• Console Logging：在getConfigInfo函数中添加console.log语句，检查在请求发送前和发送后的状态。
• Network Tab：使用浏览器的开发者工具中的网络(Network)标签页来检查请求是否成功发送和接收。
• Error Handling：为axios请求添加.catch()处理函数，以捕获并处理任何可能出现的错误。

5. 其他可能性

• CSS兼容性：确保你的CSS也是兼容低版本浏览器的。有时，页面不显示可能是因为CSS不被支持。
• HTML结构：检查HTML结构是否正确，并且没有使用到任何低版本浏览器不支持的HTML5标签或特性。

6. 总结

总的来说，解决这个问题的关键是确保你的代码和依赖都是兼容低版本浏览器的。这可能涉及到使用Babel和polyfill库来转换和添加必要的代码，以及进行仔细的调试和错误排查。

请注意，对于特定的浏览器兼容性问题，可能还需要查阅相关的文档和社区资源来获取更详细的解决方案。