首先看 vue 官网上给出的 vue-cli 在浏览器中的兼容性,图中表示是兼容 IE 9的,但是在IE9中打开项目会发现一片空白。
解决办法如下:
第一步、安装 babel-polyfill
npm install --save babel-polyfill
第二步、在 main.js 中的最前面引入 babel-polyfill
import 'babel-polyfill';
第四步、修改 config 中的 webpack.base.conf.js
中的编译配置
entry: {
// app: './src/main.js',
app: ["babel-polyfill", "./src/main.js"]
}
如果你只用到了 axios 只需要对 promise 进行兼容,可以只用 es6-promise
npm install es6-promise --save
在 main.js 中的最前面引入
import 'es6-promise/auto';
完成以上配置,IE 9 兼容就完成了。
全局引入 babel-polyfill 有 90KB 以上,
也可以不安装 babel-polyfill,使用以下方式:在 index.heml 页面最前面添加以下代码。
<script src="https://cdn.staticfile.org/babel-polyfill/6.2.4/polyfill.min.js"></script>
然后修改 webpack.base.conf.js
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'echarts': 'echarts',
'babel-polyfill': 'window'
}