如何获取Firebase Hosting预览构建的基础URL

首先明确前提：Firebase 预览通道的随机访问域名是部署阶段才动态生成的，构建阶段无法提前预知域名值，所以默认配置下构建产物里不会内置可直接读取的基础URL常量，这也是process.env.PUBLIC_URL返回空值的原因。

方案1：运行时读取window.location（官方推荐，无额外配置） #

你认为是“权宜之计”的运行时读取方案，实际上是适配多部署环境的标准实现，完全不属于不规范写法：

• 兼容所有部署场景：本地开发、正式生产、随机域名预览环境都能自动适配，不需要针对不同环境改配置
• 配合react-router使用逻辑完全对齐：react-router 内部路由解析本身就是基于当前页面的origin做的，你只需要取window.location.origin就能拿到准确的基础域名
• 生成分享链接时建议用URL API做拼接，避免斜杠转义问题：

  const shareUrl = new URL('/my-link', window.location.origin).toString()
  // 预览环境下输出：https://my-app--preview-3wrm825h.web.app/my-link
  // 正式环境下自动输出对应正式域名的路径，不需要改代码
  

• 如果用react-router v6，也可以直接用useResolvedPath、createURL这类内置工具方法生成全路径，逻辑和路由跳转完全一致，不会出现路径匹配错误。

方案2：部署阶段注入环境变量（适合有CI/CD流程的场景） #

如果你确实需要在构建阶段就拿到基础URL、不想在客户端代码里读window对象，可以通过自定义部署脚本在部署时动态注入：

1. 调用Firebase CLI创建预览通道时，加--json参数拿到结构化返回结果，提取生成的预览域名
2. 将提取到的域名写入构建时的环境变量文件，再执行build命令
   参考脚本示例：

# 部署预览通道并提取访问URL
PREVIEW_DOMAIN=$(firebase hosting:channel:deploy $PREVIEW_CHANNEL_NAME --json | jq -r '.result.hosting.site.channels[0].url')
# 注入PUBLIC_URL到生产环境变量
echo "PUBLIC_URL=$PREVIEW_DOMAIN" >> .env.production
# 执行常规构建
npm run build

这个方案的缺点是无法使用Firebase控制台/ GitHub集成的一键预览部署能力，必须自行维护部署脚本，配置和维护成本更高。

注意：不要写死正式域名做环境判断分支，后续如果更换自定义域名、新增测试环境，这类硬编码逻辑很容易出现线上故障。

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