Nuxt3调用/api/submit出现404路由匹配错误求助

核心问题排查与解决 #

1. 开发服务器未识别API文件 #

Nuxt3的热重载机制有时无法自动检测到新创建的server/api目录下的路由文件，尤其是在服务器启动后才添加文件的场景。

解决方法：
停止当前开发服务（按Ctrl+C），重新执行启动命令（如npm run dev），让Nuxt重新扫描所有服务器路由文件。

2. 前端代码的潜在错误（非404原因，但会引发其他问题） #

<script setup>属于Composition API，不存在传统组件实例的this上下文，你的this.loading = true会直接报错。需要改用响应式变量管理状态：

<script setup>
import { ref } from 'vue';

const loading = ref(false);

async function submit(form) {
  loading.value = true;

  try {
    await $fetch('/api/submit', { method: 'POST', body: form });
    console.log('Done');
  } catch {
    console.log('Error!!!');
  } finally {
    loading.value = false;
  }
}
</script>

3. 目录结构验证 #

确保你的server/api/submit.post.ts直接放在项目根目录下，而非嵌套在src或其他自定义目录中（除非你在nuxt.config.ts中修改了服务器目录配置）。正确结构如下：

- 项目根目录
  - server
    - api
      - submit.post.ts

4. API代码优化（不影响路由，但更规范） #

你的API代码逻辑没问题，但可以简化写法：

// server/api/submit.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  // 可在此添加业务逻辑，比如数据存储
  return { success: true };
});

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