vue ie8 不兼容提示怎么解决

藏色散人
发布: 2023-01-29 10:20:08
原创
1559 人浏览过

vue ie8不兼容的解决办法:1、用“babel-polyfill”将ES6的语法转成ES5;2、引入“es6-promise”;3、提示升级浏览器或者通过“(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){...}”直接跳转升级即可。

vue ie8 不兼容提示怎么解决

本教程操作环境:Windows10系统、Vue 3版、DELL G3电脑

vue ie8 不兼容提示怎么解决?

解决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用户做出很多妥协。或许强制用户升级浏览器是一个不错的选择。

推荐学习:《vue视频教程

以上是vue ie8 不兼容提示怎么解决的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!