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

墨蓝 2023-01-11 03:38 218阅读 0赞

## 问题描述 ##

> 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.  去掉验证浏览器版本的代码

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]

[transpileDependencies]: https://cli.vuejs.org/zh/config/#transpiledependencies
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20221119/bada6e086d7b4a06a88f7a33a06e8964.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20221119/c2e82a47da9c4c6eacf0b4495b4ef4b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210125202236476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw==,size_16,color_FFFFFF,t_70