低版本浏览器如何兼容html5,解决Vue兼容低版本浏览器的简单方法

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。使用Vuex和axios时需要浏览器支持：Promise，而IE并不支持Promise。

Tip：如果项目需要支持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();

Tip:虽然这些polyfill 满足了一些需求，但无形中增加了项目的大小。

方法三、低版本浏览器提示

兼容低版本浏览器本身就是一件很痛苦的事情，同时IE浏览器已经基本成为过去时了，如果再为了兼容这些浏览器做过多的工作的话，实在是一种浪费。

提示用户升级浏览器也是一个不错方法。推荐网站：快乐浏览。

快乐浏览：提供常用的浏览器下载，包括谷歌、火狐、360浏览器等。在VUE项目中的public\index.html文件里添加如下Js代码：

提示升级浏览器

(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){var d=document.createElement("div");d.className="browsehappy";d.innerHTML='

\u4f60\u7684\u6d4f\u89c8\u5668\u5b9e\u5728\u592a\u592a\u65e7\u4e86\uff0c\u592a\u592a\u65e7\u4e86 \u7acb\u5373\u5347\u7ea7

';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用户已经基本很少了，没有必要为了兼容IE用户做出很多妥协。或许强制用户升级浏览器是一个不错的选择。

低版本浏览器如何兼容html5,解决Vue兼容低版本浏览器的简单方法相关推荐

解决vue项目在ie浏览器中无法显示的问题，兼容低版本浏览器问题
解决vue项目在ie浏览器中无法显示的问题,兼容低版本浏览器问题 1.在csdn中找到了一下解决方案,但与本项目略有不同 vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空 ...
记一次解决 vue 兼容ie11 的问题
记一次解决 vue 兼容ie11 的问题参考文章: (1)记一次解决 vue 兼容ie11 的问题 (2)https://www.cnblogs.com/qq735675958/p/117757 ...
解决vue项目在ie浏览器缓存问题。
解决vue项目在ie浏览器缓存问题. 参考文章: (1)解决vue项目在ie浏览器缓存问题. (2)https://www.cnblogs.com/jiangweichao/p/11255451.ht ...
mysql 5.6 登录警告_解决mysql登录出现警告问题的简单方法
解决mysql登录出现警告问题的简单方法发布时间:2020-05-11 11:50:39 来源:亿速云阅读:125 作者:三月本文主要给大家介绍解决mysql登录出现警告问题的简单方法,文章内容 ...
python3.7 keras和tensorflow兼容_解决Keras 与 Tensorflow 版本之间的兼容性问题
在利用Keras进行实验的时候,后端为Tensorflow,出现了以下问题: 1. 服务器端激活Anaconda环境跑程序时,实验结果很差. 环境:tensorflow 1.4.0,keras 2.1 ...
解决vue和vue-template-compiler版本不一致问题
在工作台创建一个vue的项目,vue create 项目名称,出现报错信息: ERROR Error:Vue packages version mismatch:vue@2.6.10 (D:\soft ...
html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...
Microsoft Edge浏览器主页被篡改的解决办法（Microsoft Edge浏览器每次打开都是同一个页面）
Microsoft Edge每次打开都是同一个页面,在设置-- 处修改也没用,这种情况一般是Microsoft Edge浏览器主页被篡改,解决办法如下: 1.桌面右键单击Microsoft Edge, ...
解决vue项目在IE浏览器打不开的问题
问题:vue项目运行后,在IE浏览器打开,页面为空白. 解决方案: 一.首先安装babel-polyfill npm install --save babel-polyfill 二.在main.js里 ...
解决vue 不支持ie浏览器 qq浏览器的解决办法
1.引入 npm install babel-polyfill 可以在入口文件(main.js) 引入 import 'babel-polyfill' //解决IE浏览器ES6的问题和qq浏览器的问 ...

低版本浏览器如何兼容html5,解决Vue兼容低版本浏览器的简单方法

低版本浏览器如何兼容html5,解决Vue兼容低版本浏览器的简单方法相关推荐

最新文章

热门文章