如何在 nuxt 3 中同时拥有一些 SSG 路由和 SSR 路由？

Question

我使用

nuxt generate

命令构建了我的项目，所以我想要一个

SSG

网站，但是对于我的一些路线，例如

login, register

我不希望它们静态呈现，我想要它们作为

SSR

，因为例如在登录中，我有一个方法向服务器路由发送请求以登录用户，但它失败了，我不知道为什么！我什至也为我的

SSG

路线禁用了

login and register

，它们不是静态渲染的，但它仍然不起作用

这是我的

nuxt.config.ts

文件：

  ssr: true,
  nitro: {
    prerender: {
      crawlLinks: true,
    },
  },
  routeRules: {
    "/login": { prerender: false },
    "/register": { prerender: false },  // They are not pre-rendered this way and I made sure of that by checking `.output/public` directory they were not there (not rendered)
  },

这是我的登录

server route

代码：

~/server/api/login.ts

export default defineEventHandler(async (event) => {
  const body = await readBody(event);

  try {
    const data: any = await $fetch("http://localhost:8000/api/login", {
      method: "POST",
      body: body,
      headers: {
        Accept: "application/json",
      },
    });

    setCookie(event, "token", data.token, {
      sameSite: "lax",
      secure: true,
      maxAge: 60 * 60 * 24 * 180, // 6 month
      path: "/",
    });

    return data;
  } catch (error: any) {
    return error;
  }
});

这是我的

login.vue

路线代码：

~/login.vue

const login = async () => {
  try {
    const response: any = await $fetch("/api/auth/login", {
      method: "POST",
      body: form,
    });

    return response;
  } catch (err: any) {
    console.log("err", err);
  }
};

Answer 1

我想你的组件内的 $fetch 应该是

$fetch("/api/login")