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