问题:按照官网创建项目以后正常打包 == 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-cliIssues 最后被我发现只需要改成

transpileDependencies: [/node_modules/]

好吧,我哭了。。。。

下面完整答案

  1. 在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的代码了,但是我想多说几句

  1. 我在package.json 里加上这个,或者是在.browserslist 里加也是一样的
    在这里插入图片描述
  2. 如果还不行就在入口文件main.js 里加上
import 'core-js';
import 'regenerator-runtime/runtime';

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

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

最后贴一下package.json

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐