解决vue，vue-cli3、vue-cli2项目在ie浏览器中打开空白

背景：最近在做溯源项目，使用了vue-cli3构建的项目，但是在IE中打开空白，其他浏览器打开正常，为了解决此问题，安装了babel-polyfill，在main.js文件中通过import "babel-polyfill"引入了该文件，但还是没有解决此问题，搜索了好久，终于找到了一篇文章解决了我的问题，很激动，很感谢，附上原文章https://blog.csdn.net/Maggie_01/article/details/101159448，自己也做下笔记。

空白原因：

浏览器不兼容ES6语法，需要将代码中的ES6语法通过插件的方式进行转换，而且由于babel会忽略node_modules，导致依赖包中的ES6语法无法被转换

解决方法：

步骤一：安装相关插件

npm install babel-polyfill es6-promise --save

步骤二：main.js中引入，并配置

import \'babel-polyfill\'
import Es6Promise from \'es6-promise\'
require(\'es6-promise\').polyfill()
Es6Promise.polyfill()

注意：针对vue-cli2和vue-cli3，步骤一、步骤二相同，下面步骤有区分

步骤三：vue-cli2项目，创建一个.babelrc文件

{
  "presets": [
    "es2015" ,
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import", [{ "libraryName": "vant", "style": true }]]
  ],
}

步骤四：vue-cli2项目，更改webpack.base.conf.js文件配置

const path = require(\'path\')

function resolve (dir) {
  return path.join(__dirname, \'..\', dir)
}

module.exports = {
  context: path.resolve(__dirname, \'../\'),
  entry: {
    app: ["babel-polyfill", "./src/main.js"]
    // app: \'./src/main.js\'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: \'babel-loader\',
        // include: [resolve(\'src\'), resolve(\'test\'), resolve(\'node_modules/webpack-dev-server/client\')]
        query: {
          presets: [\'es2015\']
        },
        include: [
          resolve(\'src\'), 
          resolve(\'static/js\'), 
          resolve(\'test\'), 
          resolve(\'node_modules/webpack-dev-server/client\'),
          resolve(\'node_modules/vant\')
        ]
      },
    ]
  }
}

步骤三：vue-cli3项目，新建一个babel的配置文件，babel.config.js

var plugins = [];
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\'
        ]
      }
    ]
  ],
  plugins: plugins
}

transform-remove-console是用来在打包之前删除控制台打印，不需要的可以去掉

步骤四：vue-cli3项目，更改vue.config.js

const path = require(\'path\');

function resolve(dir) {
  return path.join(__dirname, \'.\', dir);
}

module.exports = {
  ...  // 其他配置
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
  // 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  transpileDependencies: [],
  chainWebpack: config => {
    config.module.rule(\'compile\')
      .test(/\.js$/)
      .include
      .add(resolve(\'src\'))
      .add(resolve(\'test\'))
      .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
          }]
        ]
      });
  }
}

重启项目，至此因为低版本不支持es6导致页面空白的问题解决了。

说明：vue-cli2项目的方法我没有测试，因为我的项目是vue-cli3.