Nginx 搭建支持多版本和前端路由的静态网站

在你的场景下，history/ 目录是上一个版本，main/ 目录是当前版本。你希望通过 Nginx 反向代理，并利用 try_files 机制，使页面刷新时仍能正常访问（避免 404），同时支持 SPA 前端路由，并且能够切换不同版本的资源。

---

一、Nginx 解决方案

你可以使用 try_files 结合 main/ 和 history/ 目录，实现：

• 默认加载 main/ 版本
• 如果 main/ 目录找不到资源，就回退到 history/
• 支持前端 SPA 刷新

Nginx 配置

nginx
复制编辑
server {
    listen 80;
    server_name yourdomain.com;

    location / {
        root /var/www/html;
        index index.html;
        try_files $uri $uri/ /main/index.html;
    }

    # 代理 main 版本
    location /main/ {
        root /var/www/html;
        index index.html;
        try_files $uri $uri/ /main/index.html;
    }

    # 代理 history 版本（如果 main 目录找不到文件，则回退到 history 版本）
    location /history/ {
        root /var/www/html;
        index index.html;
        try_files $uri $uri/ /history/index.html;
    }

    # 处理前端路由刷新 404 问题
    location /app/ {
        root /var/www/html;
        index index.html;
        try_files $uri /main/index.html;
    }

    error_page 404 /main/index.html;
}

---

二、关键点解析

1. try_files $uri $uri/ /main/index.html;

   • 先尝试访问请求的静态文件 ($uri)，如果找不到，再尝试访问目录 ($uri/)，最后回退到 main/index.html 处理 SPA 路由。

2. 支持 main/ 和 history/ 目录

   • /main/ 目录是当前版本，默认使用它。
   • /history/ 目录是上一个版本，如果 main/ 目录中找不到资源，就会尝试从 history/ 目录加载。

3. error_page 404 /main/index.html;

   • 避免用户直接刷新时 404，Nginx 会回退到 main/index.html 让前端框架处理路由。

---

三、前端如何切换版本？

1. 通过 URL 参数控制

你可以在前端代码中检测 URL 参数，如 ?version=history，然后动态切换资源：

javascript
复制编辑
const version = new URLSearchParams(window.location.search).get("version") || "main";
document.write(`<script src="/${version}/app.js"></script>`);

---

2. Nginx 变量控制

如果你希望动态切换版本，可以使用 Nginx 变量：

nginx
复制编辑
set $version main; # 默认版本
if ($arg_version = history) {
    set $version history;
}
location / {
    try_files $uri /$version/index.html;
}

这样，你可以通过 yourdomain.com?version=history 访问历史版本。

---

三、总结

其中try_files 机制适用于 SPA 应用的版本切换，切换新旧版本简单，不影响前端代码，需要正确配置 Nginx

这个方案可以完美解决前端发版导致的页面刷新问题，同时支持新旧版本共存！