具体现象
使用vue-cli脚手架搭建的项目，【npm run dev】运行，在chrome下正常显示，ie下显示空白。
问题原因
IE9-IE11 不兼容ES6语法，promise语法
问题解决
1. 下载安装包babel-polyfill、es6-promise
npm i @babel/polyfill'npm i es6-promise
2. 在main.js中引入babel-polyfill
import '@babel/polyfill'import Es6Promise from 'es6-promise'require('es6-promise').polyfill()Es6Promise.polyfill()
3.修改配置
vue2.0: 修改webpack.base.conf.js
entry: {app: ["babel-polyfill", "./src/main.js"]},
vue3.0:修改vue.config.js文件
module.exports = {configureWebpack:{// 其他配置},chainWebpack: config => {// 其他配置config.entry('main').add('babel-polyfill') // main是入口js文件// 其他配置}}
4.在index.html文件head标签中添加兼容
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
配置完成依旧空白问题排查
若此时依旧空白，则可能是个别文件未转换到
这里通过add方法，配置babel需要另外转换的文件
// vue2.0 webpack.base.conf.js {test: /\.js$/,loader: 'babel-loader',include: [resolve('src'),resolve('test'),resolve('static') // 额外配置文件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')]}
// vue3.0 根目录下新建 .babelrc 文件{"presets": ["@babel/preset-env"],"plugins": ["@babel/plugin-transform-runtime"]}// vue3.0 修改 babel.config.jsmodule.exports = {presets: [['@vue/app',{useBuiltIns: 'entry',polyfills: ['es6.promise','es6.symbol']}]]}// vue3.0 修改vue.config.jsconst path = require('path');function resolve(dir) {return path.join(__dirname, '.', dir);}module.exports = {... // 其他配置// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。// 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来transpileDependencies: ['node_modules/webpack-dev-server/client'],chainWebpack: config => {config.entry('main').add('babel-polyfill'), // main是入口js文件config.module.rule('compile').test(/\.js$/).include.add(resolve('src')).add(resolve('test')).add(resolve('static')) // 额外配置文件.add(resolve('node_modules/webpack-dev-server/client')).add(resolve('node_modules')).end().use('babel').loader('babel-loader').options({presets: [['@babel/preset-env', {modules: false}]]});}}
写在最后的话，vue不支持ie8及以下版本, 具体原因自行查阅vue官网
