在nuxt 3中如何设置useFetch中使用的全局api baseURL
在nuxt 3中如何设置useFetch中使用的全局api baseURL
提问于 2022-04-28 10:02:12
如何设置在可全局可组合的baseURL (可能是nuxt.config.ts)中使用的useFetch，这样就不必在每个useFetch中定义它。
回答 4
Stack Overflow用户
发布于 2022-04-28 10:13:14
可以设置下列可组合的
/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。
Stack Overflow用户
发布于 2022-09-07 13:46:52
可以在您的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
import { UseFetchOptions } from '#app'
import { NitroFetchRequest } from 'nitropack'
import { KeyOfRes } from 'nuxt/dist/app/composables/asyncData'
export function useMyFetch<T>(
request: NitroFetchRequest,
opts?:
| UseFetchOptions<
T extends void ? unknown : T,
(res: T extends void ? unknown : T) => T extends void ? unknown : T,
KeyOfRes<
(res: T extends void ? unknown : T) => T extends void ? unknown : T
>
>
| undefined
) {
const config = useRuntimeConfig()
return useFetch<T>(request, {
baseURL: config.public.baseURL,
...opts,
})
}然后，您可以使用useMyFetch代替useFetch -但是设置了baseURL：)
Stack Overflow用户
发布于 2022-08-23 04:32:02
对于任何仍在寻找原始问题答案的人，您可以在nuxt.config中使用runtimeConfig和env变量来完成这一任务。当然，如果您愿意，可以用硬编码值替换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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72041740
复制相关文章
相似问题
腾讯云开发者
