如何根据当前运行环境动态调整展示的HTML内容

这个需求完全可以实现，以下是几类可行的落地方案，你可以根据自己的技术栈和部署流程选择：

一、无需修改业务代码的部署侧方案 #

• Nginx内容替换
  如果你的静态资源是通过Nginx部署的，直接在两个环境的Nginx配置里添加字符串替换规则即可，不用动任何前端代码，是改造成本最低的方案：

# example1 环境的Nginx配置
sub_filter '$variable' 'the first environment';
sub_filter_types text/html;
sub_filter_once off;

# example2 环境仅需把替换值改成 'the second environment' 即可

二、前端运行时实现方案 #

• 原生JS动态判断域名替换
  直接在现有HTML中加入一段JS代码，页面加载时自动根据当前访问的域名替换对应内容：

// 提前配置域名和对应展示文本的映射关系
const envTextMap = {
  'www.example1.com': 'the first environment',
  'www.example2.com': 'the second environment'
}
const currentHost = window.location.host
// 找到对应节点替换内容，如果你有多处使用$variable，可以写全局替换逻辑
document.querySelector('b').textContent = `We are in ${envTextMap[currentHost]}`

这个方案优势是不用改部署配置，仅需要修改前端代码即可生效，劣势是首次加载会有极短的替换闪烁。

三、构建/服务端渲染方案（性能最优） #

• 构建阶段注入环境变量
  如果你用了前端构建工具（Vite/Webpack/Rollup等），只需要在两个环境的构建流程中传入不同的环境变量，构建时直接把变量值编译到HTML代码中，最终返回给浏览器的就是已经替换完成的静态内容，没有运行时消耗：

// 代码中直接引用构建变量，以Vite为例
`<b>We are in ${import.meta.env.VITE_ENV_NAME}</b>`
// 构建example1时传入 VITE_ENV_NAME=the first environment 命令参数
// 构建example2时传入 VITE_ENV_NAME=the second environment 命令参数

• 服务端模板渲染
  如果你的页面是通过服务端模板引擎渲染的，只需要在服务端接收请求时判断请求头中的Host字段，给模板变量$variable赋对应的值即可，返回给前端的直接是渲染完成的页面。

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