Vue+iview+webpack ie浏览器兼容简单处理

环境介绍：

vue: ^2.5.2
iview: ^3.1.0
Webpack: ^3.8.1

前情提要：

ie 浏览器不支持 ES6 Promise 的语法。
ie8 及以下对 html5 标签不兼容（可以通过引入html5shiv包解决，本文不处理IE11的更低版本，故不提及此法）。
ie9 以下 对 CSS3 的不兼容，各种不兼容的细节比较多，这里不说明。
ie10 及以下浏览器中不支持 dataset 方法（经学习实践发现ie11也是不支持的），而我在项目中使用了 iview, iview 的一些组件用到了这个方法。
ie 浏览器是非 webkit 内核，不支持 display: -webkit-box; 和相关样式；
Polyfill 是 shim 的一种，但他的 API 是遵循标准的。polyfill 的做法通常是：先检查浏览器是否支持某个标准 API,如果不支持,就使用旧的技术对浏览器做兼容处理,这样就可以在旧的浏览器上使用新的标准 API。比如,旧浏览器不支持 ES6 的 Array.prototype.find 方法,我们想要在项目中使用 Array.prototype.find,只要 polyfill 就行了,而不是封装一个新的方法。

处理过程

1、安装 polyfill 组件，使浏览器兼容 es6 的写法

在终端输入命令

npm install --save babel-polyfill

main.js 头部引入 babel-polyfill， 注意这个放最前面：

import 'babel-polyfill'

或者在项目的 webpack.base.conf.js 中配置：

entry: {
​  app:['babel-polyfill','./src/main.js']
 },

另外，引入的一些模块需要单独引入到 babel 的配置中，不然不起作用（具体为啥我没深究），网上查到用到 echarts-v3 的需要配置，经测试我用到 iview 也是要配置的, 下面代码的 include 中就是我配置的项，这个主要是按需配置的，具体看项目里的情况：

module: {
​  rules: [
​   ...(config.dev.useEslint ? [createLintingRule()] : []),
​   {
​    test: /.vue$/,
​    loader: 'vue-loader',
​    options: vueLoaderConfig
​   },
​   {
​    test: /.js$/,
​    loader: 'babel-loader',
​    include: [
​     resolve('src'), 
​     resolve('test'), 
​     resolve('static'),
​     resolve('node_modules/webpack-dev-server/client'),
​     // resolve('node_modules/vue-echarts'),
​     resolve('node_modules/iview/src'),
​     // resolve('node_modules/resize-detector')
​    ]​   },
}

2、兼容 dataset

我在引入了 babel-polyfill 后还是报错，信息如下图：