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

Question

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

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

Answer 1

您可以在

baseURL

中定义

nuxt.config.js|ts

，如下所示：

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

Answer 2

可以设置以下可组合项

/composables/useJsonP.ts

export const useJsonP = async (path) => {
  return await useFetch(() => `https://jsonplaceholder.typicode.com/${path}`)
}

你可以在你的视图中称之为

<script setup>
const jsonP = await useJsonP('todos/1')
</script>

<template>
  <div>
    <pre>{{ jsonP.data }}</pre>
  </div>
</template>

这样，无需在某处定义它并以某种方式破解配置。您确实有一种简单的方法来定义可重用的代码片段，借助 Nuxt 的 DX，这些代码片段可以直接导入到您的组件/视图中。

Answer 3

你也可以像这样涉及.env

在 .env

NUXT_PUBLIC_BASE_URL = https://www.someapi.com

在 nuxt.config.js/ts

runtimeConfig: {
 
    public: {
      BASE_URL: 'some fallback value',
    },
  },

正如文档中所说，

BASE_URL

将自动替换为

NUXT_PUBLIC_BASE_URL

（无需使用

process.env.NUXT_PUBLIC_BASE_URL

）

并且在可组合中你可以使用

const config = useRuntimeConfig();

console.log('base url is' , config.baseUrl)

Answer 4

如果您想在 Typescript 中执行此操作，您可以从

useFetch

推断参数，这样如果 Nuxt 内部发生变化，您就不必更新代码。

使您的基本 URL 可在您的环境中进行配置

正如其他人提到的，首先在运行时配置的公共部分设置基本 URL ：

// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

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

用您自己的可组合项包装 useFetch

useFetch

的定义使用了许多类型变量，是重载的，并且选项参数的有效内容实际上根据传递给它的请求/结果类型而变化。这使得正确重新输入变得非常困难。

更糟糕的是，即使我们正确地重新输入它，如果定义发生变化，我们的包装器也将不再正确。幸运的是，有一个非常简单的解决方案。借用

useFetch

的类型并重新使用它：

// composables/useAPIFetch.ts

import { useFetch } from "#app"

type useFetchType = typeof useFetch

// wrap useFetch with configuration needed to talk to our API
export const useAPIFetch: useFetchType = (path, options = {}) => {
  const config = useRuntimeConfig()

  // modify options as needed
  options.baseURL = config.public.baseUrl
  return useFetch(path, options)
}

注意，我们明确需要不重新声明任何类型变量、参数参数类型或返回类型，因为我们从

useFetch

的类型借用所有这些。

使用新的可组合项

在您的页面/组件中使用它，您的类型将正确流动：

// components/Foo.vue

const { data, error, pending } = await useAPIFetch<ResultsType>("/my-path", { 
  method: "POST",
  body: data,
  ...
})

Answer 5

在你的 nuxt.config 文件中添加此代码

   runtimeConfig: {
    public: {
        baseURL: process.env.BASE_URL || 'https://yourBaseURL.com/',
    },
}

然后在 composables 目录中创建一个文件并使用以下代码

 export const useCustomFetch = (request , opts)=>{
    const config = useRuntimeConfig()
    return useFetch(request,{baseURL:config.public.baseURL,
        onRequest({ request, options }) {
            // Set the request headers
        },
        onRequestError({ request, options, error }) {
            // Handle the request errors
        },
        onResponse({ request, response, options }) {
            // Process the response data
            return response._data
        },
        onResponseError({ request, response, options }) {
            // Handle the response errors
        },
        ...opts})
}

现在您可以在组件中使用这个可组合包装器 在这个可组合项中，您有拦截器

Answer 6

对于任何仍在寻找原始问题答案的人，您可以在

nuxt.config

中使用runtimeConfig和env变量来完成此操作。如果您愿意，当然可以用硬编码值替换环境变量。

在你的

nuxt.config.js/ts

runtimeConfig: {
    SOME_SECRET_KEY: process.env.SOME_SECRET_KEY,
    public: {
      SOME_API_KEY: process.env.SOME_API_KEY,
    },
  },

然后在

someComposable.js

：

const config = useRuntimeConfig();

然后您可以访问变量，例如

config.public.SOME_API_KEY

希望有帮助。更多信息在这里：https://v3.nuxtjs.org/guide/features/runtime-config

Answer 7

首先在

nuxt.config.js/ts

中设置API BaseURL，如下所示：

runtimeConfig: {
    public: {
        NUXT_PUBLIC_API_BASE: 'global API BaseURL',
    },
},

然后根据Nuxt.JS文档在

baseURL

中设置

Options

像这样：useFetch