IE浏览器兼容问题(基于vue)

1、IE浏览器打开网站后显示空白，并报错：Error in created hook: "ReferenceError: “Promise”未定义"

方法：安装相关依赖，将es6语法降至es5供ie浏览器识别
1、安装babel-polyfill依赖：  yarn add babel-polyfill 或 npm install babel-polyfill --save
2、在main.js入口引入：  import 'babel-polyfill'
3、build/webpack.base.conf.js下做以下改动
entry: {
    app: ["babel-polyfill", "./src/main.js"]
},


vue3.0在安装依赖后直接在App.vue里import  "babel-polyfill"即可

分析：就是ie内核的报错，首先定位浏览器兼容问题，然后看报错：Error in created hook: "ReferenceError: “Promise”未定义"，
也就是说promise回调不支持，promise是es6的特性，也就是说ie内核版本对es6兼容不友好，需要降级才能解析。
至于 babel-polyfill,参考官网  https://babeljs.io/docs/en/6.26.3/babel-polyfill

2、接口数据请求失败

1可能是因为IE不识别es6的promise，解决方法如上。
2也可能是因为简易接口请求格式IE浏览器不识别。换做标准的格式即可
简易格式：
getDemoList(){
    this.$axios.get(`${common.base}/admin/getdemo?page=${this.page}&pagesize=${this.pagesize}`).then(res=>{
        if(res.data.code==200){
            if(res.data.data.list){
                this.demoList=res.data.data.list
            }
        }
    }).catch(err=>{})
}


标准格式： //若开发pc端项目，尽可能使用这种格式请求接口，更加标准，也可以兼容IE浏览器。若觉得麻烦可以封装起来(参考https://www.cnblogs.com/huihuihero/p/10926228.html)
getDemoList(){
    let config={
        method:'GET',
        params:{
            page:this.page,
            pagesize:this.pageSize,
        },
    }
    this.$axios(`${common.base}/admin/getdemo`,config).then(res=>{
        if(res.data.code==200){
            if(res.data.data.list){
                this.demoList=res.data.data.list
            }
        }
    }).catch(err=>{})
},

3、IE浏览器不支持flex布局

4、element-ui框架对IE的兼容不太友好，建议使用Ant Design of Vue框架

posted @ 2020-01-16 09:43  huihuihero  阅读(2692)  评论(0)  编辑  收藏  举报