nginx 多域名共用一套静态源码的核心是统一 root + 独立 server 块 + try_files $uri $uri/ /index.html 回退逻辑，确保各域名共享 /var/www/dist 目录，且所有子路由均 fallback 至同一 index.html 由前端路由接管；需构建产物使用绝对路径（如 /js/app.js）并设 publicpath: '/'。
Nginx 用 try_files 实现多域名共用一套静态源码，核心不是让每个域名指向不同目录，而是让所有域名共享同一套文件，同时确保各自访问路径能正确命中资源（尤其是 SPA 路由刷新场景）。关键在于：统一 root + 精准的 try_files 回退逻辑 + 域名无关的路径处理。
多域名共用静态源码的基本结构
- 所有域名都指向同一个物理目录，比如
/var/www/dist - 每个域名对应一个独立
server块，但root完全一致 -
try_files不依赖$host或环境变量，只按 URI 本身查找文件/目录，最后回退到index.html（适用于 Vue/React 等前端路由）
示例配置：
server {
listen 80;
server_name site-a.com www.site-a.com;
root /var/www/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
server {
listen 80;
server_name site-b.com www.site-b.com;
root /var/www/dist; # ← 和上面完全一样
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
这样两个域名都从 /var/www/dist 加载相同 HTML、JS、CSS，且各自访问 /dashboard 或 /about 都能正常触发前端路由。
注意静态资源路径要“域名中立”
共用源码的前提是：你的前端构建产物里，所有资源引用（如 <script src="/js/app.js"></script>）使用的是绝对路径（以 / 开头），而不是相对路径或带域名的完整 URL。否则可能因 base href 或 publicPath 设置不当，导致跨域名时加载 404。
检查构建配置（如 Vue CLI 的 vue.config.js）：
module.exports = {
publicPath: '/', // ✅ 不要写 'https://site-a.com/' 或 './'
assetsDir: 'static'
}
如需区分域名做轻量定制（可选）
如果个别域名需要微调行为（比如加载不同 favicon、注入不同环境变量），不建议复制整套代码，而是在 HTML 中动态处理：
- 用 Nginx 的
sub_filter替换占位符（需开启subs_filter模块） - 或在
index.html中通过document.domain/location.host判断域名并加载对应配置
例如，在 index.html 底部加：
<script>
const host = window.location.hostname;
if (host === 'site-a.com') {
__ENV = { apiBase: '/api/v1' };
} else if (host === 'site-b.com') {
__ENV = { apiBase: '/api/v2' };
}
</script>
避免常见陷阱
- ❌ 不要在
try_files里写$host/index.html——try_files不支持变量拼接路径作为 fallback（会报错或失效） - ❌ 不要为每个域名建软链接或硬拷贝代码目录 —— 失去“共用”意义，增加维护成本
- ✅ 确保
index.html是唯一入口，且所有子路径都由前端接管（即服务端不生成真实/user/123文件） - ✅ 重启前务必
nginx -t校验语法，避免因多个 server 块重复监听 80 端口导致启动失败
只要静态资源路径规范、root 统一、try_files 回退逻辑清晰，多域名共用一套构建产物就能稳定运行。
