vue项目兼容IE浏览器

时间 2019-11-11

原文原文链接

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

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

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

报错: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...segmentfault

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

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

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

如今能够在ie9级以上版本的浏览器运行了测试

判断当前浏览器是否为IE,可是当版本低于IE9时,项目没法运行,下列代码都不能执行,因此暂时没法对IE8及如下版本进行提示this

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...spa

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

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

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