13

需求: 项目(vue-cli3.0)后期要求兼容IE8以上版本浏览器,IE8及以下提示当前浏览器版本过低

clipboard.png

vue不支持IE8及以下的版本,
同时如果是使用vue-cli构建的项目也不能在IE8以上的版本(ie9,ie10,ie11)中运行

方法一:适用于vue-cli3.x搭建的项目:
https://www.jianshu.com/p/573...

报错:Uncaught Error: only one instance of babel-polyfill is allowed
解决方法:
项目中只能引入一次babel-polyfill,我在main.js和vue.config.js中都引入了,删除main.js中的相关代码后,可以正常运行了.
ie报错:SCRIPT1014无效字符和SCRIPT5022
https://blog.csdn.net/perryli...

方法二:适用于vue-cli2.x搭建的项目:
这位大佬写的很详细,按照步骤新建一个vue项目做测试
https://blog.csdn.net/James_l...

然后使用导入babel-polyfill
https://segmentfault.com/a/11...

问题1--IE打开项目仍然显示空白
https://blog.csdn.net/zhangqi...
问题2--样式错乱
https://blog.csdn.net/weixin_...

现在可以在ie9级以上版本的浏览器运行了

判断当前浏览器是否为IE,但是当版本低于IE9时,项目无法运行,下列代码都不能执行,所以暂时无法对IE8及以下版本进行提示

  created () {
    this.getBowers()
  },
  methods: {
    getBowers () {
      var userAgent = navigator.userAgent // 取得浏览器的 userAgent 字符串
      console.log(userAgent)
      if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !userAgent.indexOf('Opera') > -1) {
        alert('IE')
        console.log('哈哈')
      }
    }
  }

补充--判断当前浏览器是否为IE:
https://blog.csdn.net/csdn_yu...

补充--条件注释判断浏览器版本
https://www.jianshu.com/p/0c4...

补充--vue-cli3.0和2.0的区别
https://blog.csdn.net/weixin_...

参考--Vue项目 IE/360浏览器兼容模式遇到的问题
https://juejin.im/post/5cad8c...


程南风
61 声望3 粉丝

你像夏至的分界线,是我一生里最长的那个白天