19

我们有一个 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但它没有改变任何东西，并且在供应商块中仍然存在粗箭头。

4

1 回答 1

7

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

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

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

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

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

于 2019-04-10T15:33:28.577 回答