在Nuxt 3中如何设置在useFetch中使用的全局API baseUrl
P粉757432491
P粉757432491 2023-10-22 18:54:21
0
1
1032

如何设置全局 useFetch 可组合项中使用的 baseUrl(可能是 nuxt.config.ts)?

如何避免在每次 useFetch 中定义它?

P粉757432491
P粉757432491

全部回复(1)
P粉638343995

您可以在 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 :-)

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板