Nuxt.js项目Babel未编译ES6导致多浏览器报错如何配置？

你遇到的两处报错均为ES6+语法未被Babel转译为ES5导致：...对象展开运算符属于ES2018语法，低版本Safari、IE原生不支持；低版本IE的严格模式下也不支持const声明语法，可通过以下配置修复：

1. 安装依赖 #

首先安装Babel转译所需的核心依赖，执行命令：
npm install @babel/preset-env core-js@3 --save-dev

2. 修改nuxt.config.js配置 #

在项目根目录的nuxt.config.js文件中，找到build配置块，新增/修改Babel相关规则：

export default {
  build: {
    babel: {
      presets({ isServer }) {
        return [
          [
            "@babel/preset-env",
            {
              // 服务端适配当前node版本，客户端指定需要兼容的浏览器范围
              targets: isServer ? { node: "current" } : {
                ie: "11",
                safari: "9",
                chrome: "58",
                firefox: "54"
              },
              // 按需注入polyfill，避免冗余代码
              useBuiltIns: "usage",
              corejs: { version: 3, proposals: true },
              // 开启宽松模式，强制将const转译为var，解决严格模式下const报错问题
              loose: true
            }
          ]
        ]
      }
    },
    // 配置需要额外编译的第三方依赖
    // 若用到node_modules中未经过ES5编译的第三方包，将包名添加到下方数组即可
    transpile: [
      // 示例：'lodash-es', 'element-ui'
    ]
  }
}

3. 验证配置生效 #

配置完成后重新执行npm run build，打包后抽查dist目录下的JS文件：

• 检查是否还存在未编译的const、...对象展开运算符等ES6+语法
• 重新在Browserstack对应的Safari、IE浏览器环境验证报错是否消除

Nuxt3默认使用Vite构建，若需要兼容低版本浏览器，可安装vite-plugin-legacy插件完成语法降级与polyfill注入；若使用Webpack作为构建器，上述配置规则同样适用。

内容的提问来源于stack exchange，提问作者Nightcrawler