vue IE报错问题

原因

IE对某些api不支持，比如promise，symbol等。需要使用Polyfill来实现这些api。

操作步骤

目前项目用的是 @vue/cli 4.1.1。在项目中配置项都是单独文件。

babel.config.js, 默认使用的是@vue/babel-preset-app
这块儿，vuecli官网有说明，可以点链接查看浏览器兼容性这一部分讲解。
babel-preset-app可更改两个配置项
useBuiltIns, polyfills
默认的useBuiltIns 为 usage, 全部可选项为entry, usage

 {
    polyfills: userPolyfills,
    loose = false,
    debug = false,
    useBuiltIns = 'usage',
    modules = false
}

默认设置的polyfills

const defaultPolyfills = [
  // promise polyfill alone doesn't work in IE,
  // needs this as well. see: #1642
  'es.array.iterator',
  // this is required for webpack code splitting, vuex etc.
  'es.promise',
  // this is needed for object rest spread support in templates
  // as vue-template-es2015-compiler 1.8+ compiles it to Object.assign() calls.
  'es.object.assign',
  // #2012 es6.promise replaces native Promise in FF and causes missing finally
  'es.promise.finally'
]

这一默认配置可通过babel.config.js进行修改

module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
       {
          polyfills: [
            'es6.promise',
            'es6.symbol'
          ]
       },
    ],
  ],
};

当useBuiltIns 的值为entry时，则polyfills值无效。这时需要安装@babel/polyfill

npm install --save @babel/polyfill

第2步在入口文件中引入，引入方法有三种。

1. main.js 中引入

import '@babel/polyfill';

import 'core-js/stable';
import 'regenerator-runtime/runtime';

3. vue.config.js 中引入, 我的项目为多页面，在pages中配置入口

entry: ['@babel/polyfill', `${pages[key]}`],

单页应用直接在chainWebpack中配置，比如入口为app

chainWebpack: config => {
  config.entry.app = ['@babel/polyfill', 'app.js']
}

折腾到最后，发现是我饮用的一个第三方库query-string导致IE报错，当请求content-type为application/x-www-form-urlencoded时将对象{a:b,c:d}转换为a=b&c=d这种形式，和后台进行交互。最后换了一个库querystringify来实现这个小功能。