在Nuxt 3中如何設定在useFetch中使用的全域API baseUrl

Question

如何設定全域 useFetch 可組合項目中使用的 baseUrl（可能是 nuxt.config.ts）？

如何避免在每次 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 :-)