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

Question

我们有一个vue-cli 3项目。它运行良好，可以毫无问题地编译。

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

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

问题

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

例如我们的chunk-vendors.js具有以下代码：

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

具有ES6粗箭头功能const o=()=>{。因此，在旧的浏览器中运行此代码会中断。

这是我们的.browserlistrc文件，因为它似乎是在Vue CLI 3中添加浏览器支持的推荐方式。

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

vue CLI似乎可以正确转换ES5中的应用程序代码。但这并不会对供应商造成影响。

是否有任何方法可以使用CLI v3配置vue项目，以在构建后进行最后一次编译，以确保文件均与ES5兼容？

我们认为嵌入式babel和webpack会自动执行此操作，但事实并非如此。

我们尝试在transpileDependencies中使用vue.config.js选项，但它没有改变任何内容，并且胖箭头仍然存在于供应商块中。

Answer 1

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

在此文件中，您要添加：-

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

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

这应与transpileDependencies中的vue.config.js选项一起使用。