vue/react项目 IE兼容常见问题及解决方案

时间:2024-03-26 08:55:33

我们用vue或者react开发完的项目,默认对ie的支持都很不友好,虽然是ie不友好。
整理了以下常用的问题及解决方案,用来记录一下~

“Map”未定义、 对象不支持“startsWith”属性或方法、 “Symbol”未定义、“Set”未定义

问题1: “Map”未定义、 对象不支持“startsWith”属性或方法、 “Symbol”未定义、“Set”未定义,都是说ie对es的新标准兼容存在问题,可以安装babel-polyfill进行转换成ie可支持的方法。
解决方案为:
安装babel-polyfill:在命令行执行npm install --save babel-polyfill
在webpack.dev.conf.js入口处增加babel-polyfill
module.exports={
devtool: ‘source-map’, // 开发调试
entry:[
“babel-polyfill”,
“./src/machineLearning/index.js” //项目入口
],
}
在刚才的入口处再次导入babel-polyfill:import “babel-polyfill”

然后重新执行npm start或npm run dev即可在ie11中看到效果

网络请求采用缓存机制

问题2: 假设我们页面上有10条数据,刚进入页面时发送了A请求以获得数据,操作某条数据点击删除后需要重新请求A接口,发现页面数据无变化。这种情况大部分是ie帮我们缓存了数据。不会重新走接口请求。
你可以观察一下网络请求、如果第二次网络请求显示“来源于缓存”,就说明是这个问题了。
如果修改呢?
第1步打开你的笔记本的电脑,然后在IE浏览器的左上角找到设置功能按钮,进入设置。
vue/react项目 IE兼容常见问题及解决方案

第2步进入到设置之后,找到设置中的internet选项。
第3步进入到internet选项之后,可以在常规中点击设置按钮。
vue/react项目 IE兼容常见问题及解决方案

第4步在设置中我们可以看到最上方的导航中的最右边的缓存。
vue/react项目 IE兼容常见问题及解决方案

第5步这里我们取消使用缓存的功能按钮的勾选框。
第6步直接点击确定功能,就可以取消缓存功能。
然后刷新页面,按之前的操作方式再看一下是否还会采取接口缓存策略

@font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的

这个问题是因为ie不支持@font-face引入字体,处理方案我明天整理~
可收藏呀,后续会持续更新呢~