如何为Heroku上的Nuxt应用根据不同子域名动态配置BaseUrl

没问题！我帮你写一个完整的服务器中间件实现方案，完美适配你这个多子域名对应不同admin baseURL的需求。核心思路是在每个请求进入时，根据访问的子域名动态匹配对应的admin地址，然后同步给服务端和客户端。

步骤1：创建服务器中间件 #

首先在项目根目录新建server/middleware/dynamicBaseUrl.js文件，这个中间件会在每个请求进来时处理域名映射：

export default function (req, res, next) {
  // 定义子域名与对应admin域名的映射关系
  const domainMap = {
    'mysubdom1.mydom.com': 'mysubdom1-admin.mydom.com',
    'mysubdom2.mydom.com': 'mysubdom2-admin.mydom.com'
  }

  // 获取当前请求的域名（Heroku会正确传递真实访问的host）
  const currentHost = req.headers.host
  // 匹配对应的admin域名，设置一个默认值防止意外情况
  const targetBaseUrl = domainMap[currentHost] || 'default-admin.mydom.com'

  // 把匹配到的baseUrl挂载到req对象上，方便后续在nuxtServerInit中获取
  req.$dynamicBaseUrl = targetBaseUrl

  // 继续执行后续中间件/路由逻辑
  next()
}

步骤2：在Nuxt配置中注册服务器中间件 #

打开nuxt.config.js，添加服务器中间件的配置，同时可以把原来硬编码的baseURL留空：

export default {
  // ... 其他原有配置
  serverMiddleware: [
    // 注册我们的动态baseURL中间件，匹配所有路径
    { path: '/', handler: '~/server/middleware/dynamicBaseUrl.js' }
  ],
  // 如果使用axios模块，这里留空后续动态设置
  axios: {
    baseURL: ''
  }
}

步骤3：在Vuex中同步baseURL到全局状态 #

修改store/index.js，在nuxtServerInit中获取中间件传递的baseURL，并存入Vuex，同时配置axios的baseURL：

export const state = () => ({
  // 存储全局的baseURL
  appBaseUrl: ''
})

export const mutations = {
  SET_APP_BASE_URL(state, url) {
    state.appBaseUrl = url
  }
}

export const actions = {
  async nuxtServerInit({ commit }, { req }) {
    // 从req中拿到中间件设置的动态baseURL
    if (req.$dynamicBaseUrl) {
      const fullBaseUrl = `https://${req.$dynamicBaseUrl}`
      commit('SET_APP_BASE_URL', fullBaseUrl)
      // 同步设置axios的baseURL
      this.$axios.defaults.baseURL = fullBaseUrl
    }
  }
}

步骤4：处理客户端路由跳转的情况 #

因为nuxtServerInit只在服务端渲染时执行，客户端路由跳转（比如点击页面链接）时需要单独处理，新建middleware/clientBaseUrl.js：

export default function ({ store, $axios }) {
  // 只在客户端执行
  if (process.client) {
    const domainMap = {
      'mysubdom1.mydom.com': 'mysubdom1-admin.mydom.com',
      'mysubdom2.mydom.com': 'mysubdom2-admin.mydom.com'
    }
    const currentHost = window.location.host
    const fullBaseUrl = `https://${domainMap[currentHost] || 'default-admin.mydom.com'}`

    // 更新Vuex状态和axios配置
    store.commit('SET_APP_BASE_URL', fullBaseUrl)
    $axios.defaults.baseURL = fullBaseUrl
  }
}

然后在nuxt.config.js中注册这个客户端中间件：

export default {
  // ... 其他原有配置
  router: {
    middleware: ['clientBaseUrl']
  }
}

最后检查Heroku配置 #

确保你的两个子域名mysubdom1.mydom.com和mysubdom2.mydom.com都通过CNAME记录指向你的Heroku应用域名（比如yourapp.herokuapp.com），Heroku会自动处理不同域名的请求转发。

这样无论用户访问哪个子域名，应用都会自动匹配对应的admin baseURL，服务端渲染和客户端路由跳转都能正常工作啦！

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