Nuxt.js如何实现单路由仅返回纯JSON响应而非HTML页面

该需求完全可以实现，无需修改项目全局配置，仅针对目标单路由做特殊处理即可，以下为不同Nuxt版本的具体实现方案。

针对Nuxt 3 版本 #

两种实现方式按需选择：

• 方式一：使用服务端路由（推荐）
  在项目根目录下创建server/routes/目标路由路径.ts文件，例如要实现/custom-json路由直接返回JSON，写入如下代码：

export default defineEventHandler(() => {
  return {
    code: 200,
    message: "请求成功",
    data: {
      // 此处填写你要返回的完整JSON内容
    }
  }
})

Nuxt会自动识别该路由，直接返回application/json类型的纯响应，无任何HTML内容。

• 方式二：在pages页面路由中实现
  如果你的目标路由必须放在pages目录下，例如创建pages/custom-json.vue文件，写入如下代码：

<script setup>
definePageMeta({
  layout: false, // 禁用全局布局
  ssr: true // 必须开启该路由的SSR渲染，纯客户端渲染模式不支持修改服务端响应
})

const jsonData = {
  code: 200,
  msg: "请求成功",
  data: {}
}

const event = useRequestEvent()
if (process.server) {
  setResponseStatus(event, 200)
  setResponseHeader(event, 'Content-Type', 'application/json')
  // 直接返回JSON内容，终止后续渲染流程
  return send(event, JSON.stringify(jsonData))
}
</script>

<template>
  <!-- 模板留空即可，服务端已提前返回响应不会走到渲染阶段 -->
</template>

针对Nuxt 2 版本 #

在pages目录下创建对应路由的页面文件，例如pages/custom-json.vue，写入如下代码：

<script>
export default {
  layout: false, // 禁用全局布局
  async asyncData({ res }) {
    const jsonData = {
      code: 200,
      msg: "请求成功",
      data: {}
    }
    if (process.server) {
      res.setHeader('Content-Type', 'application/json')
      res.end(JSON.stringify(jsonData))
    }
    return {}
  }
}
</script>

<template>
  <!-- 模板留空即可 -->
</template>

• 必须开启目标路由的SSR渲染，纯客户端渲染模式下无法在服务端提前返回JSON，会默认返回空HTML壳
• 返回JSON的逻辑执行后不要追加其他渲染相关代码，避免响应终止后执行多余逻辑

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