Nuxt3页面加载时customFetch异步函数未执行问题咨询

核心原因1：环境变量未正确暴露 #

Nuxt 3 中，公开的客户端环境变量必须以NUXT_PUBLIC_为前缀，否则useRuntimeConfig()无法在客户端获取对应的值。你的.env文件里的BASE_URL未添加前缀，导致config.public.baseURL为空，请求无法正常发起。

核心原因2：不必要的手动导入干扰执行时机 #

Nuxt 3 会自动导入composables目录下的所有导出内容，手动import { customFetch } from '@/composables/customFetch'可能导致模块初始化时机异常，初始加载时函数未被正确执行，热更新后模块重新加载才恢复正常。

修复步骤 #

1. 修正环境变量命名 #

修改.env文件：

NUXT_PUBLIC_BASE_URL = https://www.my-website.com/wp/wp-json

2. 调整composable代码 #

更新composables/customFetch.js，确保正确读取环境变量：

export const customFetch = (request, opts) => {
  const config = useRuntimeConfig()
  return useFetch(request, { baseURL: config.public.NUXT_PUBLIC_BASE_URL, ...opts })
}

3. 移除手动导入语句 #

在index.vue中删除手动导入，直接使用自动导入的customFetch：

<script setup>
const { data, pending, error, refresh } = await customFetch('/projects/v1/posts')
</script>

4. 重启开发服务 #

环境变量修改后需要重启Nuxt服务才能生效，热更新不会重新加载环境变量配置。

内容的提问来源于stack exchange，提问作者drake035