在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 :-)