Nuxt.js 请求域名变量管理：环境分离与动态配置实践

在现代化 Web 开发中，前后端分离架构已成为主流。Nuxt.js 作为基于 Vue.js 的服务端渲染框架，在处理 API 请求时需要解决一个核心问题：如何根据不同环境（开发/测试/生产）或业务场景动态切换请求域名。本文将深入探讨 Nuxt.js 中请求域名变量的管理方案，从基础配置到高级实现提供完整解决方案。

一、环境变量基础配置

Nuxt.js 通过 nuxt.config.js 中的 env 属性支持环境变量注入，这是管理请求域名的基础方式。

1.1 静态环境变量配置

在项目根目录创建 .env 文件（根据环境可创建 .env.development、.env.production 等）：

# .env.development
API_BASE_URL=http://dev-api.example.com
# .env.production
API_BASE_URL=https://api.example.com

在 nuxt.config.js 中配置：

export default {
  env: {
    apiBaseUrl: process.env.API_BASE_URL || 'https://default-api.example.com'
  },
  // ...其他配置
}

使用时通过 process.env.apiBaseUrl 访问。这种方式的优点是简单直接，但存在两个主要缺陷：

变量在构建时就被固化，无法在运行时动态切换
需要重启服务才能生效环境变更

1.2 动态环境变量方案

对于需要运行时切换的场景，可采用以下改进方案：

// plugins/env-loader.js
export default ({ isDev }, inject) => {
  const envMap = {
    development: 'http://dev-api.example.com',
    production: 'https://api.example.com',
    staging: 'https://staging-api.example.com'
  }
  const currentEnv = process.env.NODE_ENV || 'development'
  inject('apiBaseUrl', envMap[currentEnv] || envMap.development)
}

在 nuxt.config.js 中注册插件：

export default {
  plugins: [
    { src: '~/plugins/env-loader.js', mode: 'client' }
  ]
}

二、运行时域名管理进阶方案

2.1 基于路由的动态域名

对于多租户系统或区域化部署场景，需要根据用户选择动态切换域名：

// store/index.js
export const state = () => ({
  currentDomain: null
})
export const mutations = {
  setDomain(state, domain) {
    state.currentDomain = domain
  }
}
export const actions = {
  async initDomain({ commit }, { region }) {
    const domainMap = {
      us: 'https://us-api.example.com',
      eu: 'https://eu-api.example.com',
      asia: 'https://asia-api.example.com'
    }
    commit('setDomain', domainMap[region] || domainMap.us)
  }
}

在 axios 实例中动态使用：

// plugins/axios.js
export default function ({ $config, store }, inject) {
  const api = axios.create({
    baseURL: store.state.currentDomain || $config.apiBaseUrl
  })
  inject('api', api)
}

2.2 域名白名单验证

在安全要求较高的场景中，需要验证动态设置的域名是否在允许列表中：

// utils/domain-validator.js
const ALLOWED_DOMAINS = [
  'https://api.example.com',
  'https://dev-api.example.com',
  'https://staging-api.example.com'
]
export function validateDomain(domain) {
  try {
    const url = new URL(domain)
    return ALLOWED_DOMAINS.includes(url.origin)
  } catch (e) {
    return false
  }
}

在 Vuex action 中使用：

actions: {
  async setDomain({ commit, state }, domain) {
    if (!validateDomain(domain)) {
      throw new Error('Invalid domain')
    }
    commit('setDomain', domain)
  }
}

三、服务端与客户端的域名同步

3.1 初始加载时的域名同步

在 SSR 场景中，需要确保服务端和客户端使用相同的域名：

// nuxt.config.js
export default {
  serverMiddleware: [
    { path: '/api/domain', handler: '~/api/domain.js' }
  ]
}

// api/domain.js
export default (req, res) => {
  res.json({
    domain: process.env.API_BASE_URL || 'https://default-api.example.com'
  })
}

在页面组件中获取：

async asyncData({ $axios }) {
  try {
    const { domain } = await $axios.$get('/api/domain')
    return { initialDomain: domain }
  } catch (e) {
    return { initialDomain: process.env.apiBaseUrl }
  }
}

3.2 动态域名切换的 SEO 处理

当域名切换影响内容时，需要正确处理 SEO：

// middleware/domain-seo.js
export default function ({ store, route }) {
  if (process.client) {
    const domain = store.state.currentDomain
    if (domain && domain.includes('staging')) {
      document.querySelector('meta[name="robots"]').content = 'noindex, nofollow'
    }
  }
}

四、最佳实践与常见问题

4.1 推荐配置方案

开发环境：使用 .env.development + 本地代理
测试环境：通过 CI/CD 注入环境变量
生产环境：使用配置中心（如 AWS Parameter Store）动态获取

4.2 性能优化建议

对域名进行缓存，避免每次请求都重新解析
使用 Connection Pooling 管理 HTTP 连接
实现域名健康检查机制，自动切换故障域名

4.3 常见错误处理

错误场景：跨域问题

解决方案：

// nuxt.config.js
export default {
  proxy: {
    '/api/': {
      target: process.env.API_BASE_URL,
      changeOrigin: true,
      pathRewrite: { '^/api/': '' }
    }
  }
}

错误场景：混合内容警告（HTTPS 页面调用 HTTP API）