Nuxt 3如何修改构建目标？解决顶层await兼容问题

1. 修改Nuxt核心配置 #

在项目根目录的nuxt.config.ts中，添加或更新build配置项，指定Vite构建目标为更高版本的ES标准或具体现代浏览器版本：

export default defineNuxtConfig({
  build: {
    vite: {
      build: {
        // 方案1：指定ES版本（推荐es2022及以上）
        target: 'es2022',
        // 方案2：指定具体浏览器版本
        // target: ['chrome100', 'edge100', 'firefox100', 'safari16']
      }
    }
  }
})

2. 同步开发环境配置（可选） #

如果开发服务器仍报顶级await错误，补充配置开发模式下的ES构建目标：

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      esbuildOptions: {
        target: 'es2022'
      }
    }
  },
  build: {
    vite: {
      build: {
        target: 'es2022'
      }
    }
  }
})

3. 验证配置并修复残留问题 #

修改后重启开发服务器：

npm run dev

若仍存在报错，可将state-machine-cat限制为仅客户端使用：

• 在组件中用<client-only>包裹渲染内容
• 或通过动态导入方式引入库：

<template>
  <client-only>
    <!-- 状态图渲染区域 -->
  </client-only>
</template>

<script setup>
const stateMachineCat = await import('state-machine-cat')
</script>

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