如何在Nuxt项目中配置以支持ESNext模块？

算力阿峰

2026-9-30

Nuxt项目适配ESNext模块配置方案

适配纯ESNext规范的第三方模块，只需调整Nuxt内置的转译配置即可，操作步骤如下：

Nuxt3 配置方法

打开项目根目录的nuxt.config.ts（或nuxt.config.js）配置文件
在配置中添加build.transpile字段，填入你需要适配的ESNext模块名，同时可配置vite构建目标适配更高版本语法：

export default defineNuxtConfig({
  // 你项目的其他原有配置
  build: {
    // 数组内填入所有需要适配的ESNext依赖包名即可
    transpile: ['@solana/wallet-adapter', '@solana/web3.js']
  },
  // 若存在顶级await等新语法兼容问题，添加以下vite配置
  vite: {
    build: {
      target: 'esnext'
    }
  }
})

可在项目根目录package.json中新增"type": "module"字段，明确项目模块规范，减少兼容性问题。

Nuxt2 配置方法

打开项目根目录的nuxt.config.js配置文件
添加转译配置并调整babel预设：

export default {
  // 你项目的其他原有配置
  build: {
    // 数组内填入所有需要适配的ESNext依赖包名即可
    transpile: ['@solana/wallet-adapter', '@solana/web3.js'],
    babel: {
      presets({ isServer }) {
        return [
          [
            '@babel/preset-env',
            {
              targets: isServer ? { node: '14' } : { esmodules: true },
              useBuiltIns: 'usage',
              corejs: 3
            }
          ]
        ]
      }
    }
  }
}