如何在Nuxt 3的服务文件中访问runtimeConfig？

问题根源 #

useRuntimeConfig 是Nuxt的组合式API，仅能在Nuxt上下文环境（Vue组件、Nuxt插件、server目录文件等）中调用；普通工具类/service文件直接调用会因缺少上下文报错。而process.env在Nuxt 3中无法直接在客户端代码或无上下文的服务端文件中访问。

解决方案 #

方案1：将服务文件改为Nuxt插件

把service/http.ts移到plugins/http.ts，借助Nuxt插件的上下文获取配置：

import axios from 'axios'

export default defineNuxtPlugin(nuxtApp => {
  const config = useRuntimeConfig()
  const http = axios.create({
    baseURL: config.public.apiUrl,
  })
  // 将http实例注入全局，方便组件调用
  nuxtApp.provide('http', http)
})

在组件中使用：

<script setup>
const { $http } = useNuxtApp()
// 用$http发起请求
</script>

方案2：从外部传入配置

保留原service文件结构，在调用时从Nuxt上下文中获取配置并传入：
修改service/http.ts：

import axios from 'axios'

export const createHttp = (baseURL: string) => {
  return axios.create({ baseURL })
}

在组件/server路由中调用：

// 组件内
const config = useRuntimeConfig()
const http = createHttp(config.public.apiUrl)

// server路由内（如server/api/xxx.ts）
const config = useRuntimeConfig()
const http = createHttp(config.public.apiUrl)

方案3：服务端专用服务放在server目录

如果该http实例仅用于服务端，将文件移到server/utils/http.ts，即可直接使用useRuntimeConfig：

import axios from 'axios'
import { useRuntimeConfig } from '#imports'

const config = useRuntimeConfig()
export const http = axios.create({
  baseURL: config.public.apiUrl,
})

环境变量配置修正 #

确保nuxt.config.js中正确关联环境变量，让Nuxt自动注入：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiUrl: process.env.NUXT_API_URL || '默认地址',
    }
  },
});

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