zoukankan      html  css  js  c++  java
  • 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框架

  • 相关阅读:
    Redis安装(源码安装)
    为 Blade 模板引擎添加新文件扩展名
    使用国内镜像composer安装laravel
    从github上下载项目到eclipse
    js中使用Java的方式
    File类中的list()和listFiles()方法
    与文件上传到的三个类:FileItem类、ServletFileUpload 类、DiskFileItemFactory类
    DiskFileItemFactory类
    如何获取.properties配置文件
    Linux、Windows中的相对路径和绝对路径
  • 原文地址:https://www.cnblogs.com/huihuihero/p/12199709.html
Copyright © 2011-2022 走看看