vue项目适配IE浏览器（跟我一起复制粘贴即可）

前言

这两天被IE适配折磨的头大。特此写下血泪贴，为各位提供解决方案。
我做了一个大屏的vue项目，布到线上之后，可在chrome及火狐等常规浏览器正常查看，但在IE浏览器打开显示一片空白。
而客户那边的机顶盒是使用IE浏览器，且无法修改默认浏览器，这就涉及到关于IE适配的问题。

image.png

问题分析

IE无法显示主要有以下几个原因：
1、IE不支持es6的语法；
2、vue项目只能支持IE9及以上版本；
3、若使用了第三方插件库，需在babel-loader中配置相关信息

正片

1、引入 babel-polyfill；

npm i -S babel-polyfill

2、在main.js最顶部引入，保证全局覆盖；

import 'babel-polyfill'

image.png
3、在webpack.base.conf.js中
A、修改entry配置，搜索该关键词定位；

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

image.png
B、修改babel-loader配置，我的项目用到了element-ui跟 v-charts，故做如下修改：

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
     resolve('src'),
     resolve('test'),
     resolve('node_modules/webpack-dev-server/client'),
     resolve('node_modules/v-charts/src'),
     resolve('node_modules/vue-awesome'),
     resolve('node_modules/element-ui/packages'),
     resolve('node_modules/element-ui/src')
    ]
}

image.png

4、在.babelrc中修改：

{
 "presets": [
  ["env", {
   "modules": false,
   "useBuiltIns": "entry"
  }],
  "stage-2"
 ],
 "plugins": ["transform-runtime", "transform-vue-jsx"],
 "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["istanbul"]
  }
 }
}

5、再次在IE中打开，即可正常显示：

image.png

祝君成功~