Vue项目在ie浏览器中显示白屏优化提示

在工作中用到Vue开发项目，用户在IE浏览器打开页面，结果显示空白屏。作为开发者当然知道是浏览器版本过低导致语法不支持，但是用户不知情的情况下显示空白屏就很不友好。这时候有必要在页面上做点提示语告诉用户切换浏览器，下面是页面效果：

代码实现：

 

关键代码：

      (function(window) {

          var theUA = window.navigator.userAgent.toLowerCase();

          if ((theUA.match(/msie\s\d+/) && theUA.match(/msie\s\d+/)[0]) || (theUA.match(/trident\s?\d+/) && theUA.match(/trident\s?\d+/)[0])) {

              var ieVersion = theUA.match(/msie\s\d+/)[0].match(/\d+/)[0] || theUA.match(/trident\s?\d+/)[0];

              if (ieVersion < 11) {

                  var str = "你的浏览器版本太低了，已经和时代脱轨了！";

                  var str2 = "推荐使用:谷歌（Chrome）浏览器";

                  document.writeln("" +

                      "" + str + "

" +

                      str2);

                  document.execCommand("Stop"); 

              };

          }

      })(window);