Nginx配置：静态文件访问时动态添加时间戳

背景

我们有一个部署在nginx服务器的项目，技术栈是Vue3+Vite。在项目运行的过程中，出现了部分用户在访问时，静态文件加载失败的情况，类似错误就如下列这样：

javascript 复制代码

target.tagName: LINK
资源加载失败: https://xxx/assets/index-2d3846ef.css
GET https://xxx/assets/application-328b4839.css net::ERR_FAILED
GET https://xxx/assets/doc-609b78a1.css net::ERR_FAILED
GET https://xxx/assets/select-1f098d89.css net::ERR_FAILED

在分析问题的过程中，我们发现，单独访问这些报错的文件，都需要固定的20.01秒时间。但是，只要给上述访问的路径加上?_t=或者任意的的参数，立马将获取时间提升到了个位数的毫秒时间。

我们当时想到了两种方案：

在打包时，静态文件添加时间戳或版本参数；
在服务器端动态添加时间戳。

很显然，第一种方案不可取。因为动态添加的时间戳只是在打包时候，一旦打包完成，这个时间戳的值就固定了，不会再变化。不符合我们动态添加时间戳的方案。解决方案定为第2种：在nginx端添加时间戳。

对nginx不熟悉的时候，这个事情还真不好做。确实经过了不小的努力才搞定，下面把nginx动态增加时间戳的配置释放出来，供大家参考~

最最最重要的，记录下来，怕忘了！

配置方案

nginx配置方案：

bash 复制代码

#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}

http {
    # ... 其它省略
    server {
    	listen       8080;
        server_name  localhost;

		# ... 其它省略
	
		location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
			if ($args !~* "_t=") {
				# 步骤2：拼接带_t参数的新URL，并重定向（302临时重定向）
				rewrite ^(.*)$ $1?_t=$msec redirect; # redirect=302，permanent=301（永久）
			}
			set $original_args $args;
			# 过滤旧_t参数（可选，避免重复）
			if ($original_args ~* "(.*)(^|&)_t=([0-9.]+)(&.*)?") {
				set $original_args "$1$4";
			}
			# 步骤2：拼接新的_t参数（无原有参数时直接赋值）
			if ($original_args = "") {
				set $args "_t=$msec"; # 核心配置，此处必生效
			}
			# 有原有参数时拼接（可选）
			if ($original_args != "") {
				set $args "${original_args}&_t=$msec";
			}
			
			# try_files 放在set $args之后（关键！）
			try_files $uri =404;
			expires 30d;
			add_header Cache-Control "public, max-age=2592000, immutable";
			add_header X-T-Param "$arg__t" always; # 响应头验证参数
			add_header X-Args "$args" always;
		}
		
		location / {
			root   html/adps/;
            index  adps/index.html adps/index.htm;
            
            # 启用sub_filter模块，开启多次替换
			sub_filter_once off;
			# 关键2：关闭大小写敏感（避免匹配失败）
			# sub_filter_case off;
			# sub_filter核心配置（缺一不可）
			
			# 精准匹配：<script src="/assets/xxx.js"></script> 格式
			sub_filter '<script src="/assets/' '<script src="/assets/'; # 先占位，核心是下面的正则
			sub_filter '<script src="/assets/([^"]+\.js)"' '<script src="/assets/$1?_t=$msec"';
			
			# 精准匹配：<link href="/assets/xxx.css" rel="stylesheet"> 格式
			sub_filter '<link href="/assets/([^"]+\.css)" rel="stylesheet"' '<link href="/assets/$1?_t=$msec" rel="stylesheet"';
			
			# 强制禁用index.html缓存（关键！避免浏览器加载旧的未替换版本）
			add_header Cache-Control "no-cache, no-store, must-revalidate";
			add_header Pragma "no-cache";
			add_header Expires "0";
		}
		
		# ... 其它省略
		
    }
}

所有配置就是这些。

打包和项目端什么都不用改，如此，就实现了在nginx服务端给静态文件自动添加时间戳的需求。当然，也可以增加其它参数，都是没有问题的，按照上述配置就行。

最终效果就类似这样的：

在vite+vue3项目打包出来的index-78d2d144.css文件，正常访问应该是这样：

javascript 复制代码

http://localhost:8080/assets/index-78d2d144.css

但是，配置动态添加时间戳后，就变成了这样：

javascript 复制代码

http://localhost:8080/assets/index-78d2d144.css?_t=1770971812.775

完美界面每次访问静态文件都是新请求的需求~ 👍

有个最重要没有解决的问题

在浏览器窗口种单独访问一个静态文件，每次固定需要准确的20.01秒时间到底是为什么？？有没有人帮我解释一下~ 等一个大神！