Quasar Vue SSR项目获取客户端URL的window.location替代方案咨询

Quasar 针对 SSR 场景内置了对应上下文能力，无需直接调用 window 对象即可安全获取访问地址，分两个执行阶段处理即可：

服务端渲染阶段（Node 侧执行） #

SSR 服务端接收请求时会注入 ssrContext 全局上下文，你可以直接从该对象的请求头中提取所需的 host 信息，推荐在 boot 文件中完成取值并存入状态管理：

// 示例：src/boot/init-env.js
import { boot } from 'quasar/wrappers'

export default boot(({ ssrContext, store }) => {
  // 仅在服务端执行时取值
  if (process.env.SERVER) {
    // 直接获取格式为 localhost:8080 的 host 信息
    const accessHost = ssrContext.req.headers.host
    // 存入你的Pinia/Vuex状态管理仓库即可
    store.commit('common/setAccessHost', accessHost)

    // 如需完整origin地址，可拼接协议获取
    const accessOrigin = `${ssrContext.req.protocol}://${accessHost}`
    store.commit('common/setAccessOrigin', accessOrigin)
  }
})

客户端运行阶段（浏览器侧执行） #

进入客户端 hydration 之后的阶段可以安全调用 window，仅需加环境判断避免触发服务端执行时报错即可：

// 封装为公共工具函数示例
export const getAccessHost = () => {
  if (process.env.CLIENT) {
    return window.location.host
  }
  // 服务端场景优先返回状态管理中已存储的取值
  return useCommonStore().accessHost
}

注意事项 #

• 不要在组件 <template> 标签、setup 顶层无判断直接调用 window 相关属性，会直接触发 SSR 阶段执行报错
• 调用 API 时需要携带地址信息的场景，优先取状态管理中服务端预存的值，避免两端取值不一致导致 hydration 不匹配问题

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