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

ES6是ES5 的语法糖。ES6的所有功能,使用ES5都可以实现,但是使用ES6更加简单、简介、标准化.但是在ie11下面就不支持了。于是就要做转换,否则就会一堆语法错误.
本质上是同一个问题
1
你可以用别用babel-polyfill了,教你用core-js@3兼容IE浏览器
我的解决方法,如下

yarn add core-js@3

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

import 'core-js'

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
      }]]
    },

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

yarn generate:pro
yarn start:pro

看到这样的错误又是一头雾水。
在这里插入图片描述
1
一个个排查,先将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.

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

build: {
	 babel: {compact: true}
}

下面这个警告

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

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

options: {
       "presets": [["@babel/preset-env", {
        useBuiltIns: "entry",    //按需引入
        // corejs: 3
       }]
      ]
    },

上面貌似解决了问题,但是到了生产环境,使用yarn start:pro运行后,还是出问题
将混淆的js代码在JS格式化

1
通过查找node_modules中可能的文件,根据关键字定位到webpack-sources这个插件的问题
2
在这个目录中去找对应的文件
2

1
nuxt.config.js中配置对应的配置如下,找到是那个插件,然后添加到transpile后,重新yarn generate:pro就可以了

 build: {
    // 开启打包分析
    analyze: true, // 懒加载,
    // 为防止重复打包

    transpile: [
      /^antd-ui/,
      'crypto-js',
      'swiper',
      'dom7',
      'ssr-window',
      'installComponents',
      'webpack-sources',
      'source-list-map',
      ({ isDev, isLegacy }) => isDev && isLegacy && 'ansi-regex',
      ({ isDev, isLegacy }) => isDev && isLegacy && 'strip-ansi',
    ],
    options: {
       "presets": [["@babel/preset-env", {
        useBuiltIns: "entry",    //按需引入
        // corejs: 3
       }]
      ]
    },
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

warrah

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值