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"]}
对于您的问题,关于H5 webpack打包后在低版本浏览器页面无法显示,并且定位到问题代码行数与axios
请求有关,以下是一些可能的解决方案和解释:
axios
兼容性问题axios
本身可能不需要polyfill,但如果你在低版本浏览器中遇到问题,可能是因为axios
依赖了某些现代JavaScript特性。确保你的Babel配置(如.babelrc
)和polyfill(如core-js
)正确设置了,以便转换和添加必要的代码来兼容低版本浏览器。encodeURIComponent
和JSON.stringify
encodeURIComponent
:这个函数在大多数现代浏览器中都是可用的,但如果你在IE9这样的老浏览器中遇到问题,请确保你的polyfill库包含了相关的polyfill。JSON.stringify
:同样,这个函数在大多数现代浏览器中都是可用的,但为了确保兼容性,你可能需要确保polyfill库包含了它。babel-loader
正确无误,并且能够处理你的代码。getConfigInfo
函数中添加console.log
语句,检查在请求发送前和发送后的状态。axios
请求添加.catch()
处理函数,以捕获并处理任何可能出现的错误。总的来说,解决这个问题的关键是确保你的代码和依赖都是兼容低版本浏览器的。这可能涉及到使用Babel和polyfill库来转换和添加必要的代码,以及进行仔细的调试和错误排查。
请注意,对于特定的浏览器兼容性问题,可能还需要查阅相关的文档和社区资源来获取更详细的解决方案。
axios 版本从最高降到1.6.0 还是无法显示出页面,是否是babel的配置有问题呢? .baelrc webpack.config.js package.json
H5页面,在安卓7版本中浏览器打开页面为空白?怎么改? webpack.config.js配置 babel config.json 配置如下:
vite+vue3 兼容低版本浏览器有什么配置是必要的? 新建vue3+vite项目后 目前在微信pc端内置浏览器 没有显示页面 在谷歌和ie浏览器正常显示 网上方法都试过 但没什么效果 适配旧版本浏览器的@vitejs/plugin-legacy 还是babel的配置 都试过流程写了 再不行就转vue2开发项目了 这是创建的配置 这是谷歌浏览器的页面 而这是微信浏览器的页面 也没有任何报错信息
背景: 项目中引入了iconify图标库,低版本谷歌浏览器下图标不能正确显示 相关代码如下: data-icon值 bx:edit: 114、124版本谷歌浏览器下图标均正常显示 material-symbols:add: 114版本谷歌浏览器下图标没有显示,124版本谷歌浏览器下图标正常显示 尝试: iconify官网查找相关库 https://icon-sets.iconify.design/
现在相信很多团队的代码都是直接用 ES2015+ 语法来编写和维护,然后通过 Babel 将 ES2015+ 语法转成支持老浏览器的 js 代码,经过转换后的 js 代码从体积和解析执行效率上都比转换前有损耗。 兼容性 从 Caniuse 网站的数据来看,现在绝大多数的浏览器已经对 ES2015+有了很好的支持,而经过我们统计百度 APP 的 Webview 浏览器数据来看,国内大概有 74.71
我有一个使用不同浏览器的Java的Selenium项目。我正在尝试介绍MS Edge,但是在使用功能中的getVersion()方法时遇到问题。下面是初始化浏览器的方法的代码片段。WebDriver “driver” 在类的开头声明。 在ecliipse中调试期间,当我在初始化“caps”对象后将其悬停在该对象上时,它会显示以下内容:Capabilities〔{acceptSslCerts=tru