Vue項目中IE11兼容性問題記錄

1. 判斷IE瀏覽器版本 

// 獲取IE版本
function IEVersion() {
    // 取得瀏覽器的userAgent字符串
    var userAgent = navigator.userAgent;
    // 判斷是否為小於IE11的瀏覽器
    var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
    // 判斷是否為IE的Edge瀏覽器
    var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
    // 判斷是否為IE11瀏覽器
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
    if (isLessIE11) {
        var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
        // 正則表達式匹配瀏覽器的userAgent字符串中MSIE后的數字部分，，這一步不可省略！！！
        IEReg.test(userAgent);
        // 取正則表達式中第一個小括號里匹配到的值
        var IEVersionNum = parseFloat(RegExp['$1']);
        if (IEVersionNum === 7) {
            // IE7
            return 7
        } else if (IEVersionNum === 8) {
            // IE8
            return 8
        } else if (IEVersionNum === 9) {
            // IE9
            return 9
        } else if (IEVersionNum === 10) {
            // IE10
            return 10
        } else {
            // IE版本<7
            return 6
        }
    } else if (isEdge) {
        // edge
        return 'edge'
    } else if (isIE11) {
        // IE11
        return 11
    } else {
        // 不是ie瀏覽器
        return -1
    }
}

 

2. Vue-cli3 IE報 "Vuex requires a Promise polyfill in this browser"錯誤。

原因：因為使用了ES6 Promise,而IE瀏覽器不支持。

解決辦法步驟：

（1）安裝 babel-polyfill 。 babel-polyfill可以模擬ES6使用的環境，可以使用ES6的所有新方法

npm install --save-dev babel-polyfill  

（2） 配置 babel.config.js

module.export = {

presets:[

  ['@vue/app',{ useBuiltIns: 'entry'}]

]

}

(3) 在每個入口文件上方添加

 import '@babel/polyfill'

(4) 重啟項目

 

3. 第三方依賴兼容性問題

默認情況下babel-loader會忽略所有node_modules 中的文件。如果想顯式轉義一個依賴，可以配置transpileDependencies。

如果確切知道有兼容性問題的依賴包名，可以配置項目根目錄下的vue.config.js，將依賴包名添加到transpileDependencies鍵中，這會為該依賴同時開啟語法語法轉換和根據使用情況檢測 polyfill。例如：

module.exports = {
  transpileDependencies: ["sl-vue-tree"] // 需要編譯的依賴包名
}

 

4. javascript 中newDate()的瀏覽器兼容性問題，IE、safari 的new Date()的值為Invalid Date、NaN-NaN 的問題。

解決辦法：可將 - 替換為 /，斜杠通用於所有瀏覽器

let dateStr = data.repalace(/-/g, '/');

let date = new Date(dateStr) 

問題分析：主要的變化是對默認的日期格式進行了轉換，基於‘/’格式的日期字符串，才是被各瀏覽器所廣泛支持的，‘-‘連接的日期字符串則是只在Chrome下可以正常工作，

 

5. VUE路由IE瀏覽器中的路由跳轉后頁面不變更問題

解決在IE11上無法用router-link和a標簽跳轉問題，主要是當url的hashchange的時候瀏覽器沒有做出反應。里面主要是做了一個兼容。

情景一：iframe標簽跳轉問題

vue項目，利用router控制頁面切換，切換的頁面內容都是通過iframe標簽嵌套展示，chrome下切換時訪問正常，但是在IE瀏覽器出現了一個奇怪的問題：點擊切換后，瀏覽器的地址欄路徑發生切換，但是頁面沒有更新，還是切換之前的內容，打開F12查看iframe標簽的src屬性，發現src屬性沒有更新過來。

IE下的這個現象很是奇怪，最終的解決辦法是：由於點擊切換時，瀏覽器地址欄路徑發生變化，通過強制刷新頁面來實現頁面內容切換。

具體實現細節如下：在切換頁面按鈕的文件中監聽路由變化，當路由變化時判斷瀏覽器是否為IE，如果是IE，則強制刷新

// 判斷瀏覽器是否為IE
const isIE = (
/MSIE (\d+\.\d+);/.test(navigator.userAgent) || ~navigator.userAgent.indexOf('Trident/')
)

// 監聽路由
watch: {
'$route' (to, from) {
if (isIE) {
window.location.reload()
}
}
},

總結：對於通過iframe標簽嵌套組成的頁面切換，如果在IE瀏覽器下發生路由變化頁面不更新的問題，可以通過監聽路由並強制刷新頁面的方法來解決。

情景二：在ie11上從當前A頁面（/a）跳轉B頁面（/b），在地址欄直接修改路由回車跳轉B頁面，發現頁面還是A頁面，但是地址欄地址已經是B頁面地址。而且控制台並無報錯。

解決方法：在App.vue中添加判斷ie加手動修復：

mounted () {
            if (!!window.ActiveXObject || 'ActiveXObject' in window) {
                window.addEventListener('hashchange', () => {
                    let currentPath = window.location.hash.slice(1)
                    if (this.$route.path !== currentPath) {
                        this.$router.push(currentPath)
                    }
                }, false)
            }
        }

 

6. vue+element 鍵盤回車事件導致頁面刷新的問題。

當一個form原始只有一個input框時，在該輸入框中按下回車應提交該表單。如果希望阻止這一默認行為，可以在標簽上添加@submit.native.prevent.

<input @submit.native.prevent></input>

 

7.element日期組件不顯示問題

添加：

value-format = "yyyy-MM-dd" 

升級element版本