在Nuxt 3中如何设置在useFetch中使用的全局API baseUrl-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

在Nuxt 3中如何设置在useFetch中使用的全局API baseUrl

P粉757432491 2023-10-22 18:54:21

[Vue.js讨论组]

1475

如何设置全局 useFetch 可组合项中使用的 baseUrl（可能是 nuxt.config.ts）？

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

P粉757432491

全部回复(1)

P粉6383439952023-10-23 15:33:58 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 :-)