一、环境变量配置：静态域名的基础管理

在Nuxt.js项目中，环境变量是管理请求域名的最基础方式。通过.env文件与runtimeConfig的配合，可以实现开发、测试、生产环境的域名隔离。

1.1 基础环境变量配置

在项目根目录创建.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.ts中通过runtimeConfig暴露变量：

export default defineNuxtConfig({
  runtimeConfig: {
    apiBaseUrl: process.env.API_BASE_URL || 'http://localhost:3000',
    public: {
      // 公开环境变量（客户端可访问）
      publicApiUrl: process.env.PUBLIC_API_URL
    }
  }
})

1.2 类型安全的变量使用

推荐使用TypeScript接口定义环境变量类型：

// types/env.d.ts
interface NuxtRuntimeConfig {
  apiBaseUrl: string
  public: {
    publicApiUrl: string
  }
}
declare module '#app' {
  interface NuxtApp {
    $config: NuxtRuntimeConfig
  }
}

在组件中通过useRuntimeConfig()获取：

<script setup lang="ts">
const config = useRuntimeConfig()
const fetchData = async () => {
  const res = await $fetch(`${config.apiBaseUrl}/data`)
  // ...
}
</script>

二、动态域名切换：运行时的高级控制

当需要根据用户选择、地理位置或多租户系统动态切换域名时，需要更灵活的解决方案。

2.1 插件实现动态域名

创建plugins/dynamic-domain.ts：

export default defineNuxtPlugin((nuxtApp) => {
  // 从本地存储/Cookie获取域名
  const storedDomain = useState('selectedDomain')
  nuxtApp.provide('dynamicApi', {
    get: async (endpoint: string) => {
      const baseUrl = storedDomain.value || nuxtApp.$config.apiBaseUrl
      return await $fetch(`${baseUrl}${endpoint}`)
    }
  })
})

组件中使用：

<script setup>
const { $dynamicApi } = useNuxtApp()
const data = await $dynamicApi.get('/user')
</script>

2.2 服务端渲染适配方案

对于SSR场景，需通过headers或cookies传递域名信息：

// server/api/proxy.get.ts
export default defineEventHandler(async (event) => {
  const domain = getCookie(event, 'selected_domain') || 
                process.env.API_BASE_URL
  const { path } = await readBody(event)
  return await $fetch(`${domain}${path}`)
})

三、多域名架构实践

3.1 子域名路由配置

在nuxt.config.ts中配置路由与域名的映射：

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/tenant/**': {
        prerender: false,
        // 根据tenantId动态设置域名
        handler: async (event) => {
          const tenantId = event.context.params.tenantId
          const domain = getTenantDomain(tenantId) // 自定义逻辑
          event.node.res.setHeader('X-API-Domain', domain)
        }
      }
    }
  }
})

3.2 代理层集成方案

对于复杂系统，建议通过Nginx反向代理实现域名路由：

server {
  listen 80;
  server_name ~^(?<tenant>.+)\.example\.com$;
  location /api {
    proxy_pass http://$tenant-api.internal;
  }
}

四、安全与最佳实践

4.1 安全注意事项

敏感信息保护：避免在客户端暴露内部API域名
CORS配置：动态域名需正确设置Access-Control-Allow-Origin
HTTPS强制：生产环境必须使用HTTPS

4.2 性能优化建议

域名预热：提前建立DNS连接
连接复用：合理配置HTTP Keep-Alive
CDN集成：静态资源使用独立域名

4.3 错误处理机制

// composables/useApi.ts
export const useApi = () => {
  const config = useRuntimeConfig()
  const fetchWithRetry = async (url: string, retries = 3) => {
    try {
      return await $fetch(url, {
        baseURL: config.apiBaseUrl
      })
    } catch (err) {
      if (retries > 0) {
        await new Promise(resolve => setTimeout(resolve, 1000))
        return fetchWithRetry(url, retries - 1)
      }
      throw err
    }
  }
  return { fetchWithRetry }
}

五、测试与调试技巧

5.1 单元测试实现

// tests/units/api.test.ts
import { setup } from '@nuxt/test-utils'
describe('API Domain', () => {
  setup({
    runtimeConfig: {
      apiBaseUrl: 'http://test-api'
    }
  })
  it('should use correct domain', async () => {
    const { $config } = await nuxt.vueApp
    expect($config.apiBaseUrl).toBe('http://test-api')
  })
})

5.2 调试工具推荐

Nuxt DevTools：查看运行时环境变量
Postman：测试不同域名的API响应
Wireshark：分析网络请求的域名解析过程

六、进阶场景解决方案

6.1 多环境CDN配置

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    storage: {
      cdn: {
        driver: 'fs',
        base: './dist/cdn'
      }
    }
  },
  runtimeConfig: {
    cdnBaseUrl: process.env.CDN_BASE_URL || '/_nuxt'
  }
})

6.2 混合静态与动态域名

<script setup>
const isStatic = import.meta.env.SSR
const baseUrl = isStatic 
  ? useRuntimeConfig().public.staticApiUrl 
  : useRuntimeConfig().apiBaseUrl
</script>

通过以上方案，开发者可以构建出既灵活又安全的Nuxt.js域名管理系统。实际项目中，建议根据团队规模和业务复杂度选择合适的实现方式，通常环境变量+动态插件的组合可以满足80%以上的场景需求。对于超大规模应用，建议结合服务网格和API网关实现更精细的流量管理。

Nuxt.js 动态请求域名管理：环境变量与运行时配置全解析