vue浏览器兼容性问题ie9 ie10 edge

JavaScript016

vue浏览器兼容性问题ie9 ie10 edge,第1张

首先要说的是:vue 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性,比如Object.defineProperty()此方法就会报错,如下图:

所以,用vue尽量去做那些不需要兼容ie8及其以下版本的浏览器的项目。当然了,也许你有其它方法去兼容ie8,费时费力?自己权衡吧。下边要说的是vue在兼容ie9 ---到 edge这几个版本浏览器上的问题。

报错:ReferenceError: “Promise”未定义,原因是:Promise是es6的新语法,ie9和一些低版本的高级浏览器对es6新语法并不支持。

解决办法:npm install --save-dev babel-polyfill

babel-polyfill正确安装后,main.js里引用:import "babel-polyfill"

这个情况是用指令修改页面标题的错误,如下

ie浏览器提示属性找不到,具体的情况,总之如果要修改页面标题,用别人说的一个方法吧,如下

修改标题就ok了,在ie里也不会报错。

Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

首先说明一下我在这里使用的是vue-cli3创建的项目,不同版本的配置可能略有差异,不过一切以官方文档的为准,在这里先贴出vue-cli文档链接,因为文档说明还是挺详细的。 https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist

进入正题,这里说明一下本文实现兼容应用的是 Babel7.4.0 之前的版本,7.4.0版本前转码主要应用到的工具还是 @Babel/polyfill ,由于Babel默认只转换新的javascript语法,不支持新的Api(如Set,Map,Promise),所以还需要引入 cors.js ,这个项目中没有使用到Generator函数所以不需要引入 regenerator-runtime ,首先用vue-cli3创建的项目package.json文件中有 browserslist 这个字段或是在项目根目录有一个 .browserslistrc 文件,这里是用来指定可用浏览器的范围,关于指定浏览器版本配置可以参考这里 https://github.com/browserslist/browserslist 。顺便贴出目前我的配置。

可以在终端运行 npx browserslist 查询当前已选择了那些浏览器

一个用vue-cli创建的项目中默认会使用 @vue/babel-preset-app ,我们可以在node_modules >@vue >babel-preset-app >package.json文件中看到配置了core.js,

没有在entry入口文件进行配置@babel/polyfill网页打开发现很多es6新的Api是不支持的。

此文章作为学习和记录,如果有问题或是不对的地方欢迎各位大佬指出,感激不尽!