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

Question

我在 .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 };
}

我在 services/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 挂钩、Nuxt 中间件或 Vue 设置函数之外调用。

任何人都可以帮助我了解如何在组件文件外部公开 API_URL 吗？

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

Answer 1

我无法真正从片段中重现您的整个代码，但我相信有问题的调用位于

const { apiUrl } = useApiUrl();

内部

services/api.js

内部。因为像这样编写为独立常量，所以它是在加载文件时执行的，而不是在任何

<script setup>

代码内部调用时执行。

您应该将其包装在函数调用中，以避免在上下文之外被调用。

我有一个想法，但不确定它是否会像这样工作。如果有问题，请告诉我，希望我们能解决。

我会尝试将

services/api.js

变成

composables/useHTTP.js

：

export useHttp = () => {
  const HTTP = {
    baseURL: useApiUrl().value,
    headers: {
      "Content-Type": "application/json",
    },
  };
  return { HTTP };
};

然后在

request.js

：

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

  ...

}

像这样，需要可组合项的代码不应早于您第一次需要

Req

类的实例时调用。这应该已经在

<script setup>

里面了。