解決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.