vue 在IE上打开空白的问题

vue项目在IE上运行之后空白，F12发现这样的报错，如下：

f6c41ac7bfbe614994bd93d15aff36e0.png

vue-cli2下的解决办法：

1. 安装babel-polyfill：

npm instatll babel-polyfill --save

2. 在main.js中引入babel-polyfill：

import 'babel-polyfill';

3. 在build文件夹下找到 webpack.base.conf.js文件，并在文件中找到 entry入口，将里面app的内容进行替换：

entry: {
  // 这个是修改之前的
  // app: './src/main.js'
  // 这个是修改之后的
  app: ['babel-polyfill', './src/main.js']
},

4. 在build文件夹下找到 webpack.base.conf.js文件，并在文件中找到 module入口，修改对应的内容：

{
  test: /\.js$/,
  loader: 'babel-loader',
  // 这个是修改之前的
  // include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
  // 这个是修改之后的
  include: [resolve('node_modules/resize-detector/esm'), resolve('src'), resolve('test'),]
},

5. 对应修改之后的图解：

   
   
   6146b5259a5da24d88f0c643a8d2cd3f.png
   
   
   43b85d4a6954b046be718c5b0bf7c171.png

vue-cli3下的解决办法：

1. 安装babel-polyfill：

npm instatll babel-polyfill --save

2. 在main.js中引入babel-polyfill：

import 'babel-polyfill';

3. 在babel.config.js中进行相应的配置（目前使用的两种配置，其中一种即可）：

module.exports = {
  presets: [
    '@vue/app',
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry'
      }
    ]
  ],
}

4. 在vue.config.js中配置：

chainWebpack: (config) => {
  config.entry('main').add('babel-polyfill');
},
    
transpileDependencies: [
  'normalize-url', 'prepend-http', 
  'sort-keys', 'resize-detector',
],