Nuxt 3 运行时配置值在重新运行后不会被环境变量替换

Question

我在更新 runtimeConfig 中依赖于环境变量的变量时遇到了问题。

如果我使用 .env 文件中的值构建应用程序，如下所示：

API_URL=localhost:3000

我可以在控制台中看到

localhost:3000

。

停止应用程序后，将.env文件中的值更改为：

API_URL=localhost:1234

然后重新启动应用程序，我仍然在控制台中看到

localhost:3000

。

为什么runtimeConfig值没有更新？这曾经在 Nuxt 2 中完美运行，但在 Nuxt 3 中似乎不起作用。

.env

API_URL=localhost:3000

nuxt.config.js

import svgLoader from 'vite-svg-loader';

const APP_HOST = process.env.API_URL
const BASE_URL = `https://${APP_HOST}`;

export default defineNuxtConfig({
    devtools: {
        enabled: true,
    },
    telemetry: false,
    test: true,
    app: {
        baseURL: '/fe',
    },
    build: {
        transpile: ['primevue'],
    },
    css: [
        '@@/assets/scss/base.scss',
    ],
    vite: {
        plugins: [
            svgLoader({
                defaultImport: 'component',
            }),
        ],
    },
    modules: [
        '@nuxtjs/eslint-module',
        // '@nuxtjs/stylelint-module',
        '@vueuse/nuxt',
        '@pinia/nuxt',
        '@bootstrap-vue-next/nuxt',
        // 'pinia-plugin-persistedstate',
    ],
    imports: {
        dirs: ['./const', './const/paths'],
    },
    components: [
        {
            path: './components',
            pathPrefix: false,
            extensions: ['.vue'],
        },
    ],
    runtimeConfig: {
        public: {
            http: {
                baseURL: BASE_URL,
            },
        },
    },
});

登录.vue

<template>
    <div>LOGIN</div>
</template>

<script lang="ts" setup>
const runtimeConfig = useRuntimeConfig();
const baseURL = runtimeConfig.public.http.baseURL;


onMounted(() => {
    console.log('runtimeConfig', baseURL);
    console.log('runtimeConfig', runtimeConfig);
});
</script>

Answer 1

将 .env 文件中的密钥替换为：

.env

NUXT_PUBLIC_HTTP_BASE_URL=https://localhost:3000

nuxt.config.ts

runtimeConfig: {
   public:  
       http: {
          baseURL: 'https://localhost:3000',
       },
   },
},