如何在组件设置脚本之外的 nuxt 3 中使用 env 变量

问：

我已经在我的 .env 文件中定义了 API URL，如下所示

const isProdEnv = process.env.NODE_ENV === 'production'
const DEV_API_URL = "https://example-stage.herokuapp.com/v1/"
const PROD_API_URL = "https://example.herokuapp.com/v1/"
const API_URL = isProdEnv ? PROD_API_URL : DEV_API_URL

我的 nuxt 配置文件中有一个运行时配置，如下所示

runtimeConfig: {public: { apiURL: process.env.API_URL || "https://example-stage.herokuapp.com/v1/",     },   },

我想在组件之外使用此 API URL，因为我有集中的 API 调用。我定义了一个像这样调用的可组合项来使用运行时配置：UseApiUrl

export default function useApiUrl() {
  const config = useRuntimeConfig();
  const apiUrl = ref(config.public.apiURL);
  return { apiUrl };
}

我在我的服务/api.js 文件中使用了这个可组合项

import useApiUrl from "~/composables/useApiUrl";
const { apiUrl } = useApiUrl();

export const HTTP = {
  baseURL: apiUrl.value,
  headers: {
    "Content-Type": "application/json",
  },
};

我正在将request.js文件中的HTTP对象用于中心化的HTTP方法，并设置这样的标头

import { HTTP } from "./api";
export default class Req {
  constructor() {
    if (localStorage.getItem("token")) {
      HTTP.headers.Authorization = "JWT " + localStorage.getItem("token");
    } else {
      delete HTTP.headers.Authorization;
    }
  }

  async get(url, queryObject) {
    let runUrl = url;
    if (queryObject) {
      const queryParams = new URLSearchParams();
      for (const key in queryObject) {
        if (Array.isArray(queryObject[key])) {
          queryObject[key].forEach((value) => queryParams.append(key, value));
        } else {
          queryParams.append(key, queryObject[key]);
        }
      }
      runUrl = url + "?" + queryParams.toString();
    }

    try {
      const response = await fetch(HTTP.baseURL + runUrl, {
        method: "GET",
        headers: HTTP.headers,
      });

      if (!response.ok) {
        throw new Error("Network response was not ok");
      }

      return await response.json();
    } catch (error) {
      throw error;
    }
  }
  async post(url, payload) {
    try {
      const headers = { ...this.headers };

      if (payload instanceof FormData) {
        delete headers["Content-Type"];
      } else {
        headers["Content-Type"] = "application/json";
      }

      const token = localStorage.getItem("token");
      if (token) {
        headers["Authorization"] = "JWT " + token;
      }

      const response = await fetch(HTTP.baseURL + url, {
        method: "POST",
        headers: headers,
        body:
          (payload instanceof FormData && payload) || JSON.stringify(payload),
      });
      if (!response.ok) {
        throw response;
      }

      return await response.json();
    } catch (error) {
      console.log(error);
      throw error;
    }
  }
  async put(url, payload) {
    try {
      const response = await fetch(HTTP.baseURL + url, {
        method: "PUT",
        headers: HTTP.headers,
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        throw new Error("Network response was not ok");
      }

      return await response.json();
    } catch (error) {
      throw error;
    }
  }

  async patch(url, payload) {
    // Implement similarly to post
    try {
      const response = await fetch(HTTP.baseURL + url, {
        method: "PATCH",
        headers: HTTP.headers,
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        throw new Error("Network response was not ok");
      }

      return await response.json();
    } catch (error) {
      throw error;
    }
  }

  async delete(url) {
    // Implement similarly to post
    try {
      const response = await fetch(HTTP.baseURL + url, {
        method: "DELETE",
        headers: HTTP.headers,
      });

      if (!response.ok) {
        throw new Error("Network response was not ok");
      }

      return await response;
    } catch (error) {
      throw error;
    }
  }
}

我收到这个错误

[努克斯特]需要访问 Nuxt 实例的可组合项是在插件、Nuxt 钩子、Nuxt 中间件或 Vue 设置函数之外调用的。

谁能帮我了解如何在组件文件外部公开API_URL？

我需要使用 api.js 文件中的API_URL。