vue-cli3打包IE白屏解决方案

1.安装相关插件

yarn add @babel/polyfill
yarn add  @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise --dev

2.修改根目录下的文件 babel.config.js(没有自己建立)

const plugins = ["@babel/plugin-transform-runtime"];
//发布环境移除console
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
 plugins.push("transform-remove-console")
}
 
module.exports = {
 presets: [
  [
   "@vue/app",
   {
    "useBuiltIns": "entry",
    polyfills: [
     'es6.promise',
     'es6.symbol'
    ]
   }
  ],
    "@babel/preset-env"
 ],
 plugins: plugins
};

3.创建/修改根目录下的文件 vue.config.js：

module.exports = {
    // 显式转义依赖
    transpileDependencies: ['webpack-dev-server/client'],

    chainWebpack: config => {
            // 指定入口  es6转es5
            config.entry.app = ['babel-polyfill', './src/main.js'];
    }
}

4.入口引入相关插件 src/main.js

// 解决ie白屏问题
import '@babel/polyfill'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()