Vue/Nuxt.js如何按域名创建多环境文件并动态访问环境变量

核心逻辑 #

不要预生成独立.env文件，多租户动态场景下静态env文件维护成本极高，且每次更新都需要重启服务无法适配用户自主建站的需求，改用根据请求域名动态匹配配置、运行时注入的方案实现。

1. 租户配置存储方案 #

• 所有租户的配置项统一存入数据库，每条记录绑定对应租户域名、租户ID，字段覆盖所有你需要的环境配置：比如站点名称、第三方服务ID、主题配置、功能开关等
• 敏感配置（比如支付密钥、后台接口权限字段）做AES加密存储，仅服务端可解密读取，全程不暴露到前端
• 历史已有的test1.com~test5.com配置可以直接批量导入数据库，原有业务逻辑无需重构即可兼容

2. Nuxt侧动态加载配置实现 #

服务端渲染/SSR场景（Nuxt2/Nuxt3通用）

通过全局服务端中间件拦截所有请求，拿到请求域名后匹配对应配置并注入运行时：

// nuxt3示例：middleware/tenant.global.server.ts
export default defineEventHandler(async (event) => {
  // 取当前请求的域名
  const host = getRequestHost(event)
  // 从数据库/缓存查询当前域名对应的租户配置
  const tenantConfig = await db.tenantConfig.findFirst({ where: { domain: host } })
  // 全量配置挂载到请求上下文，服务端业务逻辑可直接读取
  event.context.tenantConfig = tenantConfig
  // 非敏感公共配置注入到运行时公共字段，前端可访问
  useRuntimeConfig().public.tenant = tenantConfig.publicFields
})

静态站点/SSG场景

如果用的是静态生成模式，在客户端插件中拉取对应配置：

// nuxt3示例：plugins/tenant.client.ts
export default defineNuxtPlugin(async () => {
  const host = window.location.host
  const runtimeConfig = useRuntimeConfig()
  // 请求公共接口拉取当前域名的非敏感配置
  const publicConfig = await $fetch('/api/get-tenant-public-config', {
    params: { domain: host }
  })
  runtimeConfig.public.tenant = publicConfig
})

3. 动态生成租户配置逻辑 #

用户在平台自主创建站点、绑定域名后，后台直接执行两个操作即可，无需生成静态env文件：

• 将用户填写的配置项写入数据库租户配置表，敏感字段自动加密
• 高访问量场景下可以同步写入Redis缓存，缓存key用域名做标识，减少数据库查询压力，用户修改配置后主动清除对应缓存即可实时生效

4. 配置访问方式 #

• 服务端业务逻辑：直接从event.context.tenantConfig读取全量配置（包括解密后的敏感字段）
• 前端/客户端逻辑：从useRuntimeConfig().public.tenant读取非敏感公共配置

小流量场景下如果确实需要保留静态env方案，可以在用户创建站点后调用脚本生成[域名].env文件，服务端中间件判断域名后用dotenv库动态加载对应文件，但是该方案扩容性差，不推荐100个租户以上的场景使用。

内容的提问来源于stack exchange，提问作者Nikhil Vaghela