在 Nuxt.js 中，我们可以使用它的构建系统进行自定义构建。而在构建过程中，一个重要的环节是 babel 转译。@nuxt/babel-preset-app-edge 是 Nuxt.js 解决方案中的一个 babel 转译预设，它可以帮助我们将 JavaScript 代码转译为浏览器兼容的版本。本文将详细介绍 @nuxt/babel-preset-app-edge 的使用方法。
安装
在项目的根目录下，使用 npm 或者 yarn 安装 @nuxt/babel-preset-app-edge：
npm install --save-dev @nuxt/babel-preset-app-edge
yarn add --dev @nuxt/babel-preset-app-edge
配置
接下来，在项目的根目录下，新建 babel.config.js 文件，并在其中添加以下配置：
module.exports = {
presets: ['@nuxt/babel-preset-app-edge']
}此时，@nuxt/babel-preset-app-edge 已经集成到 Nuxt.js 的构建系统中。如果您在使用 Nuxt.js 构建应用时遇到了 JavaScript 兼容性问题，可以尝试使用此预设。
示例
下面是一个简单的示例：
const foo = { a: 1, b: 2 }
Object.values(foo)在不使用 @nuxt/babel-preset-app-edge 的情况下，可能会在低版本浏览器中出现以下错误：
Uncaught TypeError: Object.values is not a function
如果我们将配置文件中的预设修改为 @nuxt/babel-preset-app-edge，再进行构建，那么就不会出现上述错误了。
结语
通过本文，我们了解了在 Nuxt.js 中使用 @nuxt/babel-preset-app-edge 的方法。这个预设可以帮助我们解决部分 JavaScript 兼容性问题。在实际开发中，我们可以根据需要使用该预设来优化我们的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0a69f5403f2923b035c094