最近用antd pro v2重构了项目，发现其并不兼容IE11以下的IE浏览器，用户体验很不友好，于是就在各大搜索引擎寻找v2兼容IE的方法，发现都不能完美解决这个问题。
网上方法
1、首先是browserslist配置（需安装依赖）：
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
}
直接配置后运行，发现IE11以下还是会报错，页面空白，此方法Pass。
2、在umi配置文件中添加targets：
targets: {
ie: 9,
},
此方法为umi官方推荐方法，直接配置后，发现IE11以下还是会报错，页面空白，此方法Pass。
自己摸索
将browserslist从package.json文件中删除，然后在umi配置文件中添加targets：
targets: {
ie: 9,
},
构建后，在IE9下打开，显示正常。
前面没有成功的方法修改
配置browserslist后，在入口文件中添加如下代码（需安装babel及相关依赖）：
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
构建后，生产环境可以支持到IE9，开发环境能到IE11。
扩展
如果用户使用IE9以下的浏览器打开网站怎么办呢？我们可以在页面上加一个判断，当用户浏览器版本<IE9，跳转到提示页面，让用户升级浏览器才能访问。
第一步：找到document.ejs；
第二步：在<head>中添加以下代码：
<!--[if lt IE 9]>
<script>
location.href = "https://www.wkepu.com/updatebrowser/";
</script>
<![endif]-->
当用户浏览器版本小于IE9，就会直接跳转到目标网站，提示用户升级浏览器。
网友评论