Vue项目兼容低版本浏览器的优化方案
Vue 无法支持 IE8 及更低版本,因为其依赖 ECMAScript 5 的特性,而这些特性在 IE8 中无法实现。不过 Vue 支持所有符合 ECMAScript 5 标准的浏览器。当使用 Vuex 和 axios 时,需要浏览器具备 Promise 支持,而 IE 不具备这一功能。
建议:如果项目需要支持 IE 用户,不推荐使用 Vue 进行开发。
如何提升 Vue 项目对旧版浏览器的支持?
方案一、使用 babel-polyfill 模拟 ES2015+ 环境
通过 babel-polyfill 将 ES6 语法转换为 ES5,模拟完整的 ES2015+ 环境。支持如 Promise、WeakMap、Array.from、Object.assign、Array.prototype.includes 等特性。
执行命令:
npm install --save babel-polyfill
引入方式:
require("babel-polyfill");
import "babel-polyfill";
方案二、使用 es6-promise 实现 Promise 支持
安装方法:
npm install es6-promise
引入方式:
require('es6-promise').polyfill();
提示:虽然这些 polyfill 能满足部分需求,但会增加项目体积。
方案三、对低版本浏览器进行友好提示
支持旧版浏览器通常是一项繁琐的任务,而 IE 浏览器已逐渐被淘汰。如果为了兼容这些浏览器投入过多资源,可能得不偿失。
向用户提示升级浏览器是一个可行的解决方案。推荐网站:快乐浏览。
快乐浏览提供主流浏览器下载,包括谷歌、火狐、360 浏览器等。可在 Vue 项目的 public/index.html 文件中添加如下代码:
浏览器升级提示
(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){var d=document.createElement("div");d.className="browsehappy";d.innerHTML='<div style="width:100%;height:100px;font-size:20px;line-height:100px;text-align:center;background-color:#E90D24;color:#fff;margin-bottom:40px;">\u4f60\u7684\u6d4f\u89c8\u5668\u5b9e\u5728<strong>\u592a\u592a\u65e7\u4e86</strong>\uff0c\u592a\u592a\u65e7\u4e86 <a target="_blank" href="http://browsehappy.osfipin.com/" style="background-color:#31b0d5;border-color: #269abc;text-decoration: none;padding: 6px 12px;background-image: none;border: 1px solid transparent;border-radius: 4px;color:#FFEB3B;">\u7acb\u5373\u5347\u7ea7</a></div>';var f=function(){var s=document.getElementsByTagName("body")[0];if("undefined"==typeof(s)){setTimeout(f,10)}else{s.insertBefore(d,s.firstChild)}};f()}}(window));
直接跳转
(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){w.location.replace("http://browsehappy.osfipin.com/");}}(window));
综上所述,目前 IE 用户数量已经非常少,没有必要为了兼容性做出过多妥协。强制用户更新浏览器可能是更优的选择。