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

Question

所以问题是我想使用Axios实例。因为:

1. newuseFetch只能在组件内部使用，也就是设置脚本。https://v3.nuxtjs.org/guide/features/data-fetching/
2. community axios模块只能在nuxt2 https://github.com/nuxt-community/axios-module/issues/536中使用，在nuxt3
中不支持。
3. 我需要在pinia actions(store)中呼叫我的后端服务。

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;

可以看到服务器端的envs，我可以控制台记录它们但在客户端，我接收不到undefined

Answer 1

您可以使用composable和useRuntimeConfig方法访问您的环境变量。

例如:

// 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实例