Nuxt3组合式函数中Axios使用环境变量触发500错误求解决

错误根源 #

你在模块顶层直接执行了const userRequest = useAxiosInstance();，而useRuntimeConfig这类Nuxt组合式函数仅能在Vue setup函数、Nuxt插件、中间件、钩子这些具备Nuxt实例上下文的环境中调用，顶层执行会导致无法获取Nuxt实例，从而抛出500错误。同时你读取runtimeConfig的路径也有误，配置里定义的是public.apiBase，并非NUXT_API_BASE。

修复步骤 #

1. 精简nuxt.config.ts配置 #

Nuxt3已废弃env配置项，仅保留runtimeConfig即可，删除冗余字段：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_API_BASE ?? "http://localhost:8000",
    },
  },
})

2. 调整composables/api.js代码 #

不要在模块顶层初始化axios实例，改为在需要使用的函数内部调用useAxiosInstance，同时修正runtimeConfig的读取路径：

import axios from 'axios';

let instance = null;

export const useAxiosInstance = () => {
    // 从public配置中读取apiBase
    const { public: { apiBase } } = useRuntimeConfig();

    if (!instance) {
      instance = axios.create({
        baseURL: apiBase,
        headers: { "Content-Type": "application/json" },
        timeout: 5000
      });

      instance.interceptors.response.use(response => {
        return response.data;
      });
    }

    return instance;
};

// 改为在函数内部获取axios实例
export const apiSignup = data => {
    const userRequest = useAxiosInstance();
    return userRequest.post('/signup', data)
        .then(() => {})
        .catch(() => {})
};

3. 在页面组件中正确调用接口函数 #

确保在页面的<script setup>或setup函数中调用apiSignup，示例如下：

<script setup>
const handleSignup = async (formData) => {
  try {
    await apiSignup(formData);
    // 处理注册成功逻辑
  } catch (error) {
    // 处理注册失败逻辑
  }
}
</script>

额外说明 #

• 环境变量名前缀NUXT_会被Nuxt自动注入到runtimeConfig中，你的.env和.env.dev配置格式是正确的。
• 所有以use开头的组合式函数，必须在Nuxt/Vue的上下文环境中调用，不能在模块顶层、普通函数的顶层执行。

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