13.4 nuxt服务器端路由配置

1.服务器端路由

nuxt.com.cn/docs/4.x/gu…

在 Nuxt3 项目根目录下创建 server/ 目录，用于存放服务器端文件，包括路由、API、数据库访问等。 Nuxt 将自动扫描 ~/server/api, ~/server/routes , 和 ~/server/middleware 目录中的 文件，以注册具有 HMR 支持的 API 和服务器处理程序。 每个文件都应该导出一个用 defineEventHandler() 定义的默认函数。 创建一个新文件 server/api/hello.ts ：

export default defineEventHandler((event) => {
 return {
 api: 'world'
 }
})

自定义 API 路由前缀

~/server/api 中的文件在它们的路由中会自动以 /api 作为前缀。 对于添加没有 /api 前缀的服 务器路由，您可以将它们放到 ~/server/routes 目录中

<template>
  <!-- vue3页面 -->
  <div>server服务器端路由--接口请求</div>
  <pre>{{ serverRes }}</pre>
  <pre>{{ serverRes2 }}</pre>
  <pre>{{ serverRes3 }}</pre>
</template>

<script lang="ts" setup>
const serverRes = ref();
const date = await $fetch("/api/hello");
console.log("服务端请求", date);
serverRes.value = date;
const serverRes2 = ref();

const date2 = await $fetch("/api/demo");
console.log("服务端请求", date2);
serverRes2.value = date2;

const serverRes3 = ref();
const date3 = await $fetch("/demo22");
console.log("服务端请求", date3);
serverRes3.value = date3;
</script>

<style scoped></style>

2.服务器端中间件server\middleware\auth.js

进入后首先请求路由中间件的方法

export default defineEventHandler((event) => {
  console.log("服务器端中间件New request: " + event.node.req.url);
});