如何在Nuxt3中使用core-js polyfill兼容旧浏览器

Nuxt3本身内置了基础polyfill处理逻辑，但如果需要自定义全局生效的core-js polyfill，推荐通过plugins目录实现，而非直接在app.vue中导入——app.vue负责页面根组件渲染，全局polyfill放在这里可能因加载时机问题导致兼容性bug。

具体实现步骤 #

1. 安装core-js（未安装时执行） #

npm install core-js
# 或使用yarn/pnpm
yarn add core-js
pnpm add core-js

2. 创建客户端专属polyfill插件 #

在项目根目录的plugins文件夹下，新建polyfill.client.ts文件（.client.ts后缀确保仅在浏览器环境执行）：

// plugins/polyfill.client.ts
// 全局导入所有稳定版polyfill
import 'core-js/stable'
// 如需支持generator函数等特性，额外导入
import 'regenerator-runtime/runtime'

3. 自动加载插件（无需额外配置） #

Nuxt3默认会自动扫描plugins目录下的文件并加载，无需手动配置。若插件命名不符合自动加载规则，可在nuxt.config.ts中手动声明：

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: [
    '~/plugins/polyfill.client.ts'
  ]
})

按需导入优化（可选） #

如果不需要全局导入所有polyfill，可按需引入特定模块缩小打包体积，比如仅补全Array.prototype.includes：

// plugins/polyfill.client.ts
import 'core-js/es/array/includes'

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