如何在NuxtJS SSR应用中将运行时环境变量传递给客户端

问题诱因 #

Nuxt 默认只会将两类环境变量注入到客户端运行环境：

• 名称以NUXT_ENV_为前缀的环境变量
• 显式声明在publicRuntimeConfig（Nuxt 2.13+ 版本支持）中的变量

你当前直接在axios配置项中使用process.env.BASE_URL，这个值仅在服务端运行时能从系统环境变量读取；客户端打包时该变量未被注入，会被判定为undefined，触发@nuxtjs/axios的默认回退逻辑：使用当前 Web 应用的访问域名作为 baseURL，因此出现你遇到的现象。本地环境通常页面访问域名和API域名一致，回退后也能正常请求，因此问题没有提前暴露。

解决方法 #

推荐使用 Nuxt 官方推荐的publicRuntimeConfig方案实现环境变量的跨端同步，修改nuxt.config.js配置如下：

export default {
  // 新增publicRuntimeConfig配置，这里的变量会同时注入服务端和客户端
  publicRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL || 'http://localhost:8080'
    }
  },
  // 原axios配置项留空即可，@nuxtjs/axios会自动读取publicRuntimeConfig中的配置
  axios: {},
  // 其他原有配置保持不变
}

注意：publicRuntimeConfig中的所有变量都会暴露给客户端，不要将密钥、凭证等敏感信息配置在这里。

修改后无需改动其他业务代码，服务端和客户端发起的axios请求都会自动使用你配置的BASE_URL。

如果你的Nuxt版本低于2.13无法使用publicRuntimeConfig，可以直接将环境变量名称改为NUXT_ENV_BASE_URL，同时修改配置为baseURL: process.env.NUXT_ENV_BASE_URL，Nuxt会自动将该变量注入客户端。

内容的提问来源于stack exchange，提问作者Meena Chaudhary