Vue CLI 3不会将供应商转换为ES5

Question

我们有一个vue-cli 3项目。它工作得很好，编译没有问题。

事实上，我们必须支持仅支持ES5代码的旧浏览器。

在项目中，我们集成了一些用ES6编写的外部库（reconnecting-websocket就是一个例子）。

问题

在使用这些外部代码编译我们的项目之后，vue-cli生成的代码具有ES6代码。

例如，我们的chunk-vendors.js有这个代码：

/*!
 * Reconnecting WebSocket
 * by Pedro Ladaria <[email protected]>
 * https://github.com/pladaria/reconnecting-websocket
 * License MIT
 */const o=()=>{if("undefined"!==typeof WebSocket)return 
WebSocket},a=t=>"function"===typeof t&&

与ES6脂肪箭头功能const o=()=>{。所以在旧浏览器中运行此代码会中断。

这是我们的qazxsw poi文件，因为它似乎是在Vue CLI 3中添加浏览器支持的推荐方法：

.browserlistrc

似乎vue CLI正确地在ES5中转换应用程序代码。但它并没有对供应商进行另一次传递。

是否有任何方法可以使用CLI v3配置vue项目，以便在构建之后进行最终的传输，以确保文件与ES5兼容？

我们认为嵌入式babel和webpack会自动执行，但似乎并非如此。

我们尝试在

> 1%
last 2 versions
not ie <= 8
Android >= 4

中使用transpileDependencies选项，但它没有改变任何东西，并且在供应商块中仍然存在胖箭头。

Answer 1

在与vue.config.js文件相同的目录中创建名为babel.config.js的文件。

在这个文件中你想要添加： -

vue.config.js

现在应该使用babel来转换外部模块。

这应该与

process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
module.exports = {
  presets: ["@vue/app"]
};

中的transpileDependencies选项一起使用。