如何将HTML/CSS/JQuery落地页与Angular项目整合到同一域名？

1. 服务器反向代理配置（以Nginx为例） #

这是核心步骤，通过Nginx的路径规则区分两个项目的访问路径：

server {
    listen 80;
    server_name mydomain.com;

    # 主域名请求转发到静态落地页目录
    location / {
        root /usr/share/nginx/landing-page; # 替换成你的落地页实际目录
        index index.html;
        try_files $uri $uri/ =404;
    }

    # /sign-in 路径转发到Angular构建产物目录
    location /sign-in {
        root /usr/share/nginx/angular-dist; # 替换成Angular dist目录的上级路径
        index index.html;
        # 处理Angular单页应用的路由刷新问题
        try_files $uri $uri/ /sign-in/index.html;
    }
}

配置完成后重启Nginx生效：sudo systemctl restart nginx

2. Angular项目适配子路径部署 #

因为Angular部署在/sign-in子路径下，需要调整项目的基础路径：

• 构建时直接指定base href：

ng build --prod --base-href "/sign-in/"

• 或者在angular.json中永久配置：

{
  "projects": {
    "your-angular-project": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/sign-in/"
          }
        }
      }
    }
  }
}

这样Angular的路由、资源文件都会自动适配/sign-in路径，避免加载错误。

3. 落地页登录按钮跳转设置 #

在静态落地页的登录按钮上添加跳转逻辑，直接指向Angular的登录页：

• 原生HTML方式：

<button class="login-btn" onclick="window.location.href='/sign-in'">登录</button>

• jQuery方式：

$('.login-btn').click(function() {
    window.location.href = '/sign-in';
});

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