vuecli4打包后在低版本浏览器中运行报错Uncaught SyntaxError: Use of const in strict mode

在网上查了很多报错原因,结果都不适用,我使用的vuecli的版本是4.4.0

网上说了很多都是es6转es5的配置,但是vuecli4版本都不太适用.

vue-cli4 默认使用 Babel 7 + babel-loader + @vue/babel-preset-app，但是可以通过 babel.config.js 配置使用任何其它 Babel 预设选项或插件。

默认情况下，babel-loader 会排除 node_modules 依赖内部的文件。如果希望显性编译一个依赖的模块，你需要将其添加入 vue.config.js 中的 transpileDependencies 选项

最后查看官方文档 传送门 在vue.config.js中配置了使用到的额外依赖项vue-element-loading.

  transpileDependencies: [
    // 可以是字符串或正则表达式
    'vue-element-loading',
    // 'vue-count-to',
    // 'vue-print-nb',
    // 'vue-html5-editor',
    // 'qrcodejs2',
  ],

vue-cli浏览器兼容性配置项可以参考官方文档:https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist 

我按照官方文档配置结果也没有解决我的问题,最后只添加transpileDependencies那一项就解决了.

vuecli4默认会把基本的依赖转化成es5,自己后面开发项目时增加的新依赖就不会转了,所以需要自己添加配置项转化.

 

还可以设置 .browserslistrc 文件,内容为

> 1%
last 5 versions
not dead
Chrome 40.0
ie >= 9

Chrome 40是要兼容的老版浏览器版本号,终端中运行 npx browserslist 可以看到项目支持的浏览器列表