前言
这两天被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
祝君成功~
