兼容IE浏览器

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"]
},


分析:就是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=>{})
},

猜你喜欢

转载自www.cnblogs.com/huihuihero/p/12199709.html