axios 如何在nuxt 3中使用安装脚本之外的环境变量

zkure5ic 于 2023-11-18 发布在 iOS

关注(0)|答案(1)|浏览(163)

所以问题是，我想使用Axios示例。因为：
1.新的useFetch只能在组件内部使用，也就是安装脚本。https://v3.nuxtjs.org/guide/features/data-fetching/
1.社区Axios模块仅在nuxt2 https://github.com/nuxt-community/axios-module/issues/536中可用，在nuxt3中不受支持
1.我需要在pinia行动（商店）调用我的后端服务。
nuxt.config.js

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.API_BASE_URL ?? "http://localhost:8080/api/v1",
    },
  },
  env: {
    apiBase: process.env.API_BASE_URL ?? "http://localhost:8080/api/v1",
  },
  buildModules: ["@pinia/nuxt"],
});

字符串
这里是instance.js

import axios, { AxiosResponse } from "axios";

const instance = axios.create({
  baseURL: process.env.API_BASE_URL,
});

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

export default instance;

型
所以它确实看到了服务器端的env，因为我可以控制台记录它们，但在客户端，我确实收到了无法读取的未定义

axios

来源：https://stackoverflow.com/questions/72715322/how-to-use-env-variables-in-nuxt-3-outside-of-setup-scripts

1条答案

按热度按时间

u3r8eeie1#

您可以使用可组合方法和useRuntimeConfig方法访问env变量。
比如说，

// file composables/use-axios-instance.ts

import axios, { AxiosResponse } from "axios";

let instance = null;

export const useAxiosInstance = () => {
  const { API_BASE_URL } = useRuntimeConfig();

  if (!instance) {
    instance = axios.create({
      baseURL: API_BASE_URL,
    });

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

  return instance;
};

字符串
然后，您可以使用const axios = useAxiosInstance();访问您的axios示例

赞(0）回复(0）举报 2023-11-18

我来回答

axios 如何在nuxt 3中使用安装脚本之外的环境变量

1条答案

相关问题

热门标签

最新问答