Nuxt.js项目客户端内容在Firefox 34等旧浏览器无法显示问题求助

核心原因说明 #

Firefox 34为2014年发布的 legacy 版本，完全不支持ES6+语法、大部分现代Web API，Nuxt默认输出的编译产物包含大量未转译的高版本语法，旧浏览器解析JS时报错直接终止执行，导致客户端渲染逻辑完全失效，内容无法展示。

具体修复步骤 #

1. 调整Nuxt编译配置 #

修改nuxt.config.js文件，开启全量polyfill、指定兼容目标浏览器版本，开启服务端渲染兜底：

// nuxt.config.js
export default {
  // 开启服务端渲染，首屏内容由服务端输出，哪怕客户端JS执行失败也能展示基础内容
  target: 'server',
  build: {
    corejs: 3,
    babel: {
      presets({ isServer }) {
        return [
          [
            "@babel/preset-env",
            {
              // 服务端按当前node版本编译，客户端指定兼容Firefox 34
              targets: isServer ? { node: "current" } : { firefox: "34" },
              useBuiltIns: "usage",
              corejs: 3
            }
          ]
        ]
      }
    }
  }
}

2. 强制转译第三方依赖 #

如果项目引入的第三方npm包未做ES5兼容，需要将对应包名加入transpile数组，强制babel对其转译：

build: {
  // 示例：把所有用到的未兼容ES5的第三方依赖加入该数组
  transpile: ['axios', 'vueuse', '其他依赖包名']
}

3. 替换无法兼容的API #

• 禁止在客户端代码中使用ProxyAPI，该API无法被polyfill，Firefox 34完全不支持，需替换为其他逻辑实现
• 排查代码中用到的Promise.finally、Array.prototype.includes、Object.assign等高版本API，确保已被core-js正确polyfill

4. 排查具体报错 #

打开Firefox 34开发者工具的控制台，查看具体的JS报错信息，根据报错逐个修复剩余的语法、API不兼容问题。 #

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