vue-cli3.x配置babel转换node-modules,兼容chrome低版本浏览器

问题描述

vue-cli3创建的项目,在低版本浏览器中运行,运行不起来,因为默认都是开启高版本浏览器。
控制台会报一系列错误,特别是node_modules中的插件的es6等高级语法不识别问题。所以按照下面的配置一步解决。

请注意

默认情况下,babel-loader会忽略所有 node_modules 中的文件,但是我们在某一些安装包引入的时候也需要进行babel转换,那怎么办呢
transpileDependencies:转换node-modules必备

以vue为例

核心配置:vue.config.js

可以将整个node_modules匹配,但是打包的文件太大,可以单独将有问题的文件单独匹配即可。

module.exports = {
    transpileDependencies: [
    	/[/\\]node_modules[/\\]sm-crypto[/\\]/,
    	/[/\\]node_modules[/\\]view-design[/\\]/,
        // /[/\\]node_modules[/\\]test[/\\]/, // 配置方式
        // /[/\\]node_modules[/\\][@\\]test2[/\\]test3[/\\]/,
    ]
}

无需操作步骤

  1. 安装babel-polyfill
  2. main.js
    import "babel-polyfill";
  3. package.json
    "browserslist": [
        "> 0.1%",
        "chrome 42"
      ]
    
  4. 去掉验证浏览器版本的代码

效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值