Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。使用Vuex和axios时需要浏览器支持:Promise,而IE并不支持Promise。
还期望Vue兼容IE浏览器吗
Tip:如果项目需要支持IE用户,不建议使用Vue构建。
如何使用Vue支持更多的浏览器(IE)?
方法一、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();
Tip:虽然这些polyfill 满足了部分需求,但无形中增加了项目的大小。
方法三、低版本浏览器提示
兼容低版本浏览器本身就是一件很痛苦的事情,同时IE浏览器已经基本成为过去时了,如果再为了兼容这些浏览器做过多的工作的话,实在是一种浪费。
提示用户升级浏览器也是一个不错方法。推荐网站:快乐浏览。
快乐浏览:提供常用的浏览器下载,包括谷歌、火狐、360浏览器等。在VUE项目中的public\index.html文件里添加如下Js代码参考:
(详细的代码可以搜索:快乐浏览。网站中有代码和库的说明)
1、提示升级浏览器
(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){var d=document.createElement("div");d.className="browsehappy";d.innerHTML='
这上面代码中的“【跳转域名】”指的是快乐浏览的网站地址。
2、直接跳转
(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){w.location.replace("【跳转域名】");}}(window));
上面代码中的“【跳转域名】”指的是快乐浏览的网站地址。
综合来讲,目前IE用户已经基本很少了,没有必要为了兼容IE用户做出很多妥协。或许强制用户升级浏览器是一个不错的选择。