IE兼容
在 ie9 的环境上,es6 的部分新对象、表达式,并不支持,解决方案是使用 babel-polyfill
组件,它可以将 es6 的代码翻译成低版本浏览器可以识别的 es5 代码,运行以下代码安装babel-polyfill
组件
npm install babel-polyfill -S
安装完成后,在项目的主入口文件 main.js
的首行直接引用
即使在使用 babel-polyfill
做代码翻译后,发现还是有一些 es6 的新特性并没有解决,比如说 Number
对象的 parseInt
和 parseFloat
方法
es6 将全局方法 parseInt()
和 parseFloat()
,移植到 Number
对象上面,行为完全保持不变。这样做的目的,是逐步减少全局性方法,使得语言逐步模块化。
解决这个问题不需要引入包来解决,同样在项目主入口文件 main.js
加入以下代码(代码尽可能靠前,最好是在引用 babel-polyfill
之后 )
当然,如果你只用到了 axios
对 promise
进行兼容,可以只用 es6-promise
,并在main.js
中引用es6-promise/auto
npm install es6-promise -S
main.js
文件代码示例
// 兼容IE
import 'babel-polyfill';
if (Number.parseInt === undefined) Number.parseInt = window.parseInt;
if (Number.parseFloat === undefined) Number.parseFloat = window.parseFloat;
import 'es6-promise/auto'
import Vue from 'vue'
import App from '@/App'
import router from '@/router' // api: https://github.com/vuejs/vue-router
import store from '@/store' // api: https://github.com/vuejs/vuex
import VueCookie from 'vue-cookie'
在项目使用 vue-cli
生成的代码中,根目录有一个 .babelrc
文件,这是项目使用 babel 的配置文件。在默认生成的模板内容中,增加 "useBuiltIns": "entry"
的设置内容,这是一个指定哪些内容需要被 polyfill(兼容) 的设置
useBuiltIns 有三个设置选项
-
false
- 不做任何操作 -
entry
- 根据浏览器版本的支持,将 polyfill 需求拆分引入,仅引入有浏览器不支持的polyfill -
usage
- 检测代码中ES6/7/8
等的使用情况,仅仅加载代码中用到的 polyfill.babelrc
文件代码示例{ "presets": [ ["env", { "modules": false, "useBuiltIns": "entry", "targets": { "browsers": [ "> 1%", "last 2 versions", "not ie <= 8" ] } }], "stage-2" ], "plugins": ["transform-runtime","transform-vue-jsx", ["component", [ { "libraryName": "element-ui" } ]]], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"] } } }
修正不规范的的代码
-
重复的属性,IE会报一个错误 “strict 模式下不允许一个属性有多个定义”:
-
错误的css代码会导致IE白屏,且没有报错信息
例1.元素有两个style属性
<div style="" class="header_user_t1 ub-ac" style="cursor: auto"> </div>
例2.vue组件有重复的属性,本例中为border属性重复
<el-table :data="tableData" border :border="false" style="width: 100%;"> </el-table>
例3.错误的css语法
<div style="border:box-sizing:border-box;paddig-bottom:10px;"> </div>