详解vue-cli项目在IE浏览器打开报错解决方法

当使用vue-cli创建的项目在IE浏览器中打开时，可能会遇到Object doesn't support property or method 'assign'或Promise未定义等错误。这是因为IE浏览器不支持ES6（ES2015）新特性，而vue-cli默认使用的是ES6语法并使用了一些ES6新特性，这对于IE浏览器来说是无法正确识别的。

下面是解决方法的完整攻略：

1. 安装babel-polyfill

babel-polyfill是一个babel插件，它提供了ES6新特性的垫片（polyfill），可以让IE浏览器正确识别ES6语法和新特性。要安装babel-polyfill，可以执行以下命令：

npm install --save babel-polyfill

安装完成之后，在项目入口文件main.js中引入babel-polyfill：

import 'babel-polyfill'

2. 修改babel配置文件

由于vue-cli默认使用的是babel7，因此我们需要修改babel配置文件babel.config.js。在babel.config.js中加入"babel/preset-env"插件，并在plugins选项中加入"transform-runtime"插件，配置如下所示：

module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry", // 按需加载ES6垫片
        "corejs": 2 // 需要使用的corejs版本
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2, // 需要使用的corejs版本
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

3. 配置webpack

我们需要在vue.config.js文件中对webpack进行配置，以让其正确处理ES6语法和新特性：

module.exports = {
  chainWebpack: config => {

    // 添加babel-polyfill垫片
    config.entry('app').add('babel-polyfill')

    // 添加处理ES6语法和新特性的loader
    config.module
        .rule('es6')
        .test(/\.js$/)
        .use('babel-loader')
        .loader('babel-loader')
        .options({
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'entry',
                corejs: 2
              }
            ]
          ],
          plugins: [
            '@babel/plugin-transform-runtime'
          ]
        })
        .end()
  }
}

示例说明

以下是两个示例，分别说明如何在vue-cli创建的项目中解决Object doesn't support property or method 'assign'和Promise未定义错误。

示例1：解决Object doesn't support property or method 'assign'错误

在main.js中添加babel-polyfill的引用：

import 'babel-polyfill'

在babel.config.js中添加"babel/preset-env"插件和"transform-runtime"插件：

module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry", // 按需加载ES6垫片
        "corejs": 2 // 需要使用的corejs版本
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2, // 需要使用的corejs版本
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

在vue.config.js中添加处理ES6语法和新特性的loader：

module.exports = {
  chainWebpack: config => {
    // 添加babel-polyfill垫片
    config.entry('app').add('babel-polyfill')

    // 添加处理ES6语法和新特性的loader
    config.module
        .rule('es6')
        .test(/\.js$/)
        .use('babel-loader')
        .loader('babel-loader')
        .options({
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'entry',
                corejs: 2
              }
            ]
          ],
          plugins: [
            '@babel/plugin-transform-runtime'
          ]
        })
        .end()
  }
}

示例2：解决Promise未定义错误

在main.js中添加babel-polyfill的引用：

import 'babel-polyfill'

在vue.config.js中添加使用IE11和Safari 9版本的polyfill：

module.exports = {
  chainWebpack: config => {
    // 添加babel-polyfill垫片
    config.entry('app').add('babel-polyfill')

    // 添加处理ES6语法和新特性的loader
    config.module
        .rule('es6')
        .test(/\.js$/)
        .use('babel-loader')
        .loader('babel-loader')
        .options({
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage', // 按需加载polyfill
                corejs: 3,
                targets: {
                  ie: '11',
                  safari: '9'
                }
              }
            ]
          ],
          plugins: [
            '@babel/plugin-transform-runtime'
          ]
        })
        .end()
  }
}

注意：使用polyfill时可能会造成打包后文件变大，需要根据项目实际情况选择是否使用。