vue-cli3打包后chunk文件有ES6箭头函数，转ES5_vue3 打包时 router 模块没有转 es5-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41673550/article/details/119936120

在Vue项目中遇到编译不支持ES6箭头函数的问题，尝试通过配置vue.config.js的transpileDependencies和babel.config.js的polyfills来解决，但未成功。最终发现只需将vue.config.js的transpileDependencies改为[/node_modules/]，同时确保babel.config.js正确配置，问题得到解决。此解决方案可能涉及Vue CLI的依赖转译和Babel的转换设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：按照官网创建项目以后正常打包 == OK的，但是这边燕尾服编译不支持ES6语法箭头函数，看一下效果
在这里插入图片描述
可以看到chunk-vendors.[hash].js里面是有箭头函数的，而且能看到是vue-router包存在箭头函数

去cli官网上查 transpileDependencies 要配置这个参数，因为打包的时候默认不转义node_modules的包，显而易见那就配上 transpileDependencies: ['vue-router']

配完打包，哦吼，不管用。。。。

查资料，据说还得配个babel

babel.config.js

module.exports = {
  presets: [
    ['@vue/app', {
        useBuiltIns: 'entry',
        polyfills: [
            'es6.promise',
            'es6.symbol'
        ]
      }
    ]
  ]
}

哦吼还是不管用，，，那就把用到的依赖全部加上
在这里插入图片描述
不能说不管用吧，成功的从三千多个箭头函数变成三百多了，，，然并卵

经过我一下午的探索，查了Google查了vue-cli的 Issues 最后被我发现只需要改成

transpileDependencies: [/node_modules/]

好吧，我哭了。。。。

下面完整答案

在vue.config.js里加上

// vue.config.js

transpileDependencies: [/node_modules/],

在这里插入图片描述
2. 在vue.config.js同级新建或者本身就有的 babel.config.js 里加上这句

//  babel.config.js

module.exports = {
  presets: [
    ['@vue/app', {
        useBuiltIns: 'entry',
        polyfills: [
            'es6.promise',
            'es6.symbol'
        ]
      }
    ]
  ]
}

在这里插入图片描述

到这里我这边就没有ES6的代码了，但是我想多说几句

我在package.json 里加上这个，或者是在.browserslist 里加也是一样的
如果还不行就在入口文件main.js 里加上

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

有的说法是加上import '@babel/polyfill' 但是这个马上就要被废弃，也可以试试吧，没准行呢，就先用着

我找这个费老劲了，希望可以帮到看到此文，遇到此事的大家

最后贴一下package.json吧

在这里插入图片描述