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版本

 

来源：https://www.cnblogs.com/yisaa/p/12396691.html