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框架