Nuxt3重启后Runtime Config未被环境变量更新问题求助

问题根源 #

你在nuxt.config.js的顶层提前定义了APP_HOST和BASE_URL变量，这部分代码会在Nuxt加载配置的初始阶段就执行并固定值，后续修改.env文件后，即使重启应用，这部分代码也不会重新读取新的环境变量——因为Nuxt的配置解析逻辑是先执行顶层代码，再处理defineNuxtConfig内部的配置。

另外，Nuxt3对runtimeConfig的处理逻辑和Nuxt2不同：Nuxt2允许在外部提前赋值后传入runtimeConfig，但Nuxt3要求runtimeConfig内部直接引用process.env，才能保证运行时读取最新的环境变量。

修复方案 #

删除配置文件顶层的APP_HOST和BASE_URL定义，直接在runtimeConfig内部拼接环境变量：

修改后的nuxt.config.js关键部分：

import svgLoader from 'vite-svg-loader';

// 移除这里的APP_HOST和BASE_URL变量定义

export default defineNuxtConfig({
    // 其他原有配置保持不变...
    runtimeConfig: {
        public: {
            http: {
                // 直接在配置内引用process.env，让Nuxt在运行时读取最新值
                baseURL: `https://${process.env.API_URL}`,
            },
        },
    },
});

额外说明 #

• 若需要在项目其他地方复用这个地址，不要在配置文件顶层提前赋值，而是通过useRuntimeConfig()在组件、插件或composable中获取：

  const runtimeConfig = useRuntimeConfig();
  const baseURL = runtimeConfig.public.http.baseURL;
  

• 如果是生产构建后修改.env，此方案不生效——因为生产构建时runtimeConfig.public下的内容会被打包到客户端代码中固化。若需要生产环境动态修改环境变量，需将API_URL设为服务器端runtimeConfig（去掉public前缀），并通过API路由转发请求。

内容的提问来源于stack exchange，提问作者Yan Doshchinskiy