在服务器端渲染 (SSR) 期间尝试在 utils 目录内的文件中运行 useRuntimeConfig 时，Nuxt 实例不可用

Question

我正在 Nuxt 3 中使用 SSR 构建前端网站，后端使用 Laravel。在 Nuxt 3 项目中，我的utils目录中有一个 ApiBridge.js 文件，我用它来组织 API 调用、设置基本 URL 等。自从启动该项目以来，我一直在关闭服务器端渲染的情况下运行该文件。方便，但是当我尝试在 SSR 打开（在 nuxt.config.js 中打开）的情况下运行它时，我收到“Nuxt 实例不可用”错误。我一边忙于这个项目，一边在旅途中学习 Nuxt 3，所以我可能会错过一些明显的东西。

import axios from "axios";

const runtimeConfig = useRuntimeConfig()

const api = axios.create({
    baseURL: runtimeConfig?.API_BASE_URL,
    withCredentials: true,
});


const apiBridge = {
    login: (info) => api.post('/login', {
        ...info,
    }),

    register: (info) => api.post('/register', {
        ...info,
    })

    /* .... */
}

export default apiBridge;

为什么会发生这种情况？这是一个不好的方法吗？如何修复它？为什么在 SSR 关闭的情况下它还能工作？是因为汽车进口吗？提前致谢！

浏览了一下网络，但没有发现任何有用的东西。

编辑：nuxt.config.js 根据评论的要求

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: [
        '@nuxtjs/tailwindcss',
        [
            '@pinia/nuxt',
            {
                autoImports: [
                    // automatically imports `defineStore`
                    'defineStore', // import { defineStore } from 'pinia'
                    // automatically imports `defineStore` as `definePiniaStore`
                    ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
                ],
            },
        ],
    ],
    tailwindcss: {
        configPath: './tailwind.config.js'
    },
    build: {

    },
    // ssr: false, // remove later
    runtimeConfig: {
        public: {
            BASE_URL: process.env.BASE_URL,
            API_BASE_URL: process.env.API_BASE_URL,
        }
    },
})

Answer 1

经过一番反复之后，我最终将 apiBridge 移动到 composables 目录并将其更改为Nuxt 3 composable。我认为这就是 Nuxt 3 中应该完成的方式。它看起来确实很整洁，并且可以完成工作。

import axios from "axios"

export const useApiBridge = () => {
    const runtimeConfig = useRuntimeConfig()

    const api = axios.create({
        baseURL: runtimeConfig.API_BASE_URL,
        withCredentials: true,
    });

    return {   
        login: (info) => api.post('/login', {
            ...info,
        }),

        register: (info) => api.post('/register', {
            ...info,
        })
    }
}

然后在组件和其他文件中我使用它

const apiBridge = useApiBridge()