In Nuxt 3 erfahren Sie, wie Sie die in useFetch verwendete globale API-BaseURL festlegen

Question

Wie lege ich die baseUrl fest, die im globalen useFetch Composable (wahrscheinlich nuxt.config.ts) verwendet wird?

Wie vermeide ich die Definition bei jedem useFetch?

Answer 1

您可以在 nuxt.config.js|ts 中定义 baseURL，如下所示：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    public: {
      baseURL: process.env.BASE_URL || 'https://api.example.com/',
    },
  },
  // ...

（或使用固定值或仅环境变量 - 根据您的喜好）

并添加此可组合项：

// /composables/useMyFetch.js

export const useMyFetch = (request, opts) => {
  const config = useRuntimeConfig()

  return useFetch(request, { baseURL: config.public.baseURL, ...opts })
}

如果你想要类型安全，你可以这样实现：

// /composables/useMyFetch.ts

export const useMyFetch: typeof useFetch = (request, opts?) => {
  const config = useRuntimeConfig()

  return useFetch(request, { baseURL: config.public.baseURL, ...opts })
}

然后您可以使用 useMyFetch 作为 useFetch 的替代品 - 但要设置 baseURL :-)