blocks|key|3805614|text|可以设置下列可组合的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3805615|/composables/useJsonP.ts|offset|length|style|CODE|3805616|export+const+useJsonP+=+async+(path)+=>+{
++return+await+useFetch(()+=>+`https://jsonplaceholder.typicode.com/${path}`)
}|code-block|syntax|javascript|3805617|你可以把这称为你的观点|3805618|<script+setup>
const+jsonP+=+await+useJsonP('todos/1')
</script>

<template>
++<div>
++++<pre>{{+jsonP.data+}}</pre>
++</div>
</template>|3805619|这样，就不需要在某个地方定义它并以某种方式破解配置。您确实有一种简单的方法来定义可重用的代码片段，这些代码可以直接导入组件/视图，这要归功于Nuxt的DX。|3805620|entityMap^0|0|0|O|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

The following composable could be set 
<code>/composables/useJsonP.ts</code>
<pre class="lang-js prettyprint-override"><code>export const useJsonP = async (path) =&gt; {
 return await useFetch(() =&gt; `https://jsonplaceholder.typicode.com/${path}`)
}
</code></pre>
And you could call this in your view
<pre class="lang-html prettyprint-override"><code>&lt;script setup&gt;
const jsonP = await useJsonP('todos/1')
&lt;/script&gt;

&lt;template&gt;
 &lt;div&gt;
 &lt;pre&gt;{{ jsonP.data }}&lt;/pre&gt;
 &lt;/div&gt;
&lt;/template&gt;
</code></pre>
That way, no need to define it somewhere and hack somehow the configuration. You do have a simple way of defining reusable pieces of code, that are directly imported into your components/views thanks to the DX of Nuxt.

blocks|key|3805645|text|对于任何仍在寻找原始问题答案的人，您可以在nuxt.config中使用runtimeConfig和env变量来完成这一任务。当然，如果您愿意，可以用硬编码值替换env变量。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3805646|在你的nuxt.config.js/ts里|3805647|runtimeConfig:+{
++++SOME_SECRET_KEY:+process.env.SOME_SECRET_KEY,
++++public:+{
++++++SOME_API_KEY:+process.env.SOME_API_KEY,
++++},
++},|code-block|syntax|javascript|3805648|然后在someComposable.js|3805649|const+config+=+useRuntimeConfig();|3805650|然后，您可以以例如config.public.SOME_API_KEY的形式访问变量。|3805651|希望这能有所帮助。更多信息在这里：https://v3.nuxtjs.org/guide/features/runtime-config|3805652|entityMap|0|LINK|mutability|MUTABLE|url|https://v3.nuxtjs.org/guide/features/runtime-config^0|L|B|0|3|H|0|0|3|H|0|0|9|Q|0|H|1F|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|U|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

For anyone still looking for the answer to the original question you can do this in <code>nuxt.config</code> with runtimeConfig and env variables. You can of course replace the env variables with a hard-coded values if you prefer.
In your <code>nuxt.config.js/ts</code>
<pre><code>runtimeConfig: {
 SOME_SECRET_KEY: process.env.SOME_SECRET_KEY,
 public: {
 SOME_API_KEY: process.env.SOME_API_KEY,
 },
 },
</code></pre>
Then in <code>someComposable.js</code>:
<pre><code>const config = useRuntimeConfig();
</code></pre>
You can then access your variables as eg <code>config.public.SOME_API_KEY</code>
Hope that helps. More info here: <a href="https://v3.nuxtjs.org/guide/features/runtime-config" rel="nofollow noreferrer">https://v3.nuxtjs.org/guide/features/runtime-config</a>

blocks|key|4240307|text|可以在您的baseURL中定义如下所示的nuxt.config.js%7Cts：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4240308|import+{+defineNuxtConfig+}+from+'nuxt'

export+default+defineNuxtConfig({
++//+...
++runtimeConfig:+{
++++public:+{
++++++baseURL:+process.env.BASE_URL+%7C%7C+'https://api.example.com/',
++++},
++},
++//+...|code-block|syntax|javascript|4240309|(或使用固定值或仅使用环境变量-随您的喜好而定)|4240310|并添加以下可组合的内容：|4240311|//+/composables/useMyFetch.js

export+const+useMyFetch+=+(request,+opts)+=>+{
++const+config+=+useRuntimeConfig()

++return+useFetch(request,+{+baseURL:+config.public.baseURL,+...opts+})
}|4240312|如果您想使用完整的类型版本，则需要更长的时间：|4240313|//+/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?:
++++%7C+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
++++++++>
++++++>
++++%7C+undefined
)+{
++const+config+=+useRuntimeConfig()

++return+useFetch<T>(request,+{
++++baseURL:+config.public.baseURL,
++++...opts,
++})
}|4240314|然后，您可以使用useMyFetch代替useFetch+-但是设置了baseURL：)|4240315|entityMap^0|5|7|K|H|0|0|0|0|0|0|0|8|A|K|8|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|17|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|U|3|V|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|X|$]]

You can define the <code>baseURL</code> in your <code>nuxt.config.js|ts</code> like this:
<pre class="lang-js prettyprint-override"><code>import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
 // ...
 runtimeConfig: {
 public: {
 baseURL: process.env.BASE_URL || 'https://api.example.com/',
 },
 },
 // ...
</code></pre>
(or use a fixed value or only the environment variable - as you like)
And add this composable:
<pre class="lang-js prettyprint-override"><code>// /composables/useMyFetch.js

export const useMyFetch = (request, opts) =&gt; {
 const config = useRuntimeConfig()

 return useFetch(request, { baseURL: config.public.baseURL, ...opts })
}
</code></pre>
If you want to have the full blown version with types it's a bit longer:
<pre class="lang-js prettyprint-override"><code>// /composables/useMyFetch.ts

import { UseFetchOptions } from '#app'
import { NitroFetchRequest } from 'nitropack'
import { KeyOfRes } from 'nuxt/dist/app/composables/asyncData'

export function useMyFetch&lt;T&gt;(
 request: NitroFetchRequest,
 opts?:
 | UseFetchOptions&lt;
 T extends void ? unknown : T,
 (res: T extends void ? unknown : T) =&gt; T extends void ? unknown : T,
 KeyOfRes&lt;
 (res: T extends void ? unknown : T) =&gt; T extends void ? unknown : T
 &gt;
 &gt;
 | undefined
) {
 const config = useRuntimeConfig()

 return useFetch&lt;T&gt;(request, {
 baseURL: config.public.baseURL,
 ...opts,
 })
}
</code></pre>
You can then use <code>useMyFetch</code> as replacement for <code>useFetch</code> - but with baseURL being set :-)

blocks|key|4240334|text|您还可以使用.env这样的|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|4240335|在.env|4240336|NUXT_PUBLIC_BASE_URL+=+https://www.someapi.com|code-block|syntax|javascript|4240337|在nuxt.config.js/ts中|4240338|runtimeConfig:+{
+
++++public:+{
++++++BASE_URL:+'some+fallback+value',
++++},
++},|4240339|正如它在文档中所说的，BASE_URL将自动被NUXT_PUBLIC_BASE_URL取代。|CODE|4240340|(不需要使用process.env.NUXT_PUBLIC_BASE_URL+)|4240341|在可组合中，您可以使用|4240342|const+config+=+useRuntimeConfig();

console.log('base+url+is'+,+config.baseUrl)|4240343|entityMap^0|6|4|0|1|4|0|0|1|H|0|0|B|8|N|K|0|6|W|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1C|8|@$9|1D|A|1E|B|S]|$9|1F|A|1G|B|S]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1H|8|@$9|1I|A|1J|B|S]]|D|@]|E|$]]|$1|V|3|W|5|6|7|1K|8|@]|D|@]|E|$]]|$1|X|3|Y|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|Z|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|10|$]]

You can also involve .env like this
in .env
<pre><code>NUXT_PUBLIC_BASE_URL = https://www.someapi.com
</code></pre>
in nuxt.config.js/ts
<pre><code>runtimeConfig: {
 
 public: {
 BASE_URL: 'some fallback value',
 },
 },
</code></pre>
as it said in the document <code>BASE_URL</code> will be replaced by <code>NUXT_PUBLIC_BASE_URL</code> automatically
( no need to use <code>process.env.NUXT_PUBLIC_BASE_URL</code> )
and in composable you can use
<pre><code>const config = useRuntimeConfig();

console.log('base url is' , config.baseUrl)
</code></pre>

How do I set the baseURL that is used in useFetch composable globally (maybe nuxt.config.ts) so that I wouldn't have to define it in every useFetch.

How to set global api baseURL used in useFetch in nuxt 3

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

如何设置在可全局可组合的baseURL (可能是nuxt.config.ts)中使用的useFetch，这样就不必在每个useFetch中定义它。

问在nuxt 3中如何设置useFetch中使用的全局api baseURL
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在nuxt 3中如何设置useFetch中使用的全局api baseURLEN