nuxt使用core-js在ie11下的兼容性问题处理

ES6是ES5 的语法糖。ES6的所有功能，使用ES5都可以实现，但是使用ES6更加简单、简介、标准化.但是在ie11下面就不支持了。于是就要做转换，否则就会一堆语法错误.
本质上是同一个问题

你可以用别用babel-polyfill了，教你用core-js@3兼容IE浏览器
我的解决方法，如下

yarn add core-js@3
1

在plugins目录，新建core.js，里面就一句

import 'core-js'
1

nuxt.config.js中找到对应的配置

transpile: [
      /^antd-ui/,
      'crypto-js',
      'swiper',
      'dom7',
      'ssr-window',
    ({ isDev, isLegacy }) => isDev && isLegacy && 'ansi-regex',
      ({ isDev, isLegacy }) => isDev && isLegacy && 'strip-ansi'
    ],
    options: {
      "presets": [["@babel/preset-env", {
          useBuiltIns: "entry",    // or usage
          corejs: 3
      }]]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

解决思路还算简单，就是你进入到语法错误，引用的是那个js，你把对应的js，写入到transpile中即可
关于引入swiper导致白页面的问题
按照上面的思路，按钮可以点击了，没有报错了。但是却出现一个更罕见的问题。
ie11进入到调试模式，再刷新，页面可以点击。而首次直接进入页面，却无法操作，这是什么原因呢？
在生产环境，却也没那么轻松,采用静态编译后，在浏览器中打开出现了新的问题。

yarn generate:pro
yarn start:pro
1
2

看到这样的错误又是一头雾水。


一个个排查，先将yarn generate:pro过程的error解决掉

 ERROR  [BABEL] Note: The code generator has deoptimised the styling of D:\appworks\vuework\eayc\door\dist\_nuxt\5e9f119.js as it exceeds the max of 
500KB.
1
2

解决方案是在nuxt.config.js中配置

build: {
	 babel: {compact: true}
}
1
2
3

下面这个警告

When setting `useBuiltIns: 'usage'`, polyfills are automatically imported when needed.
  Please remove the direct import of `core-js` or use `useBuiltIns: 'entry'` instead.
1
2

处理方案如下,注释掉corejs:3，因为他会自动导入

options: {
       "presets": [["@babel/preset-env", {
        useBuiltIns: "entry",    //按需引入
        // corejs: 3
       }]
      ]
    },
1
2
3
4
5
6
7