当前位置：首页 > news >正文

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

news 来源：原创 2025/5/11 8:28:45

在你的场景下，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;
}

二、关键点解析

try_files $uri $uri/ /main/index.html;
- 先尝试访问请求的静态文件 ($uri)，如果找不到，再尝试访问目录 ($uri/)，最后回退到 main/index.html 处理 SPA 路由。
支持 main/ 和 history/ 目录
- /main/ 目录是当前版本，默认使用它。
- /history/ 目录是上一个版本，如果 main/ 目录中找不到资源，就会尝试从 history/ 目录加载。
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
URL 参数控制前端加载	适用于用户可自由选择版本	用户体验好，可以灵活回退版本	需要前端代码支持
Nginx 变量控制	适用于自动化切换版本	配置灵活，自动适配不同版本	需要 Nginx 解析请求参数