博客

由于版本控制或代码更新造成前端代码修改后没有实施生效可能发生的情况

vue、react或其他项目；

更新升级了之后；index.html文件的文件名没变

；可是引入的css js文件名称变了；这个时候由于nginx对静态文件的缓存，就可能访问出之前的老的index.html这个入口文件；都是我们项目更新，大多数时候是覆盖之前的目录，就会造成

上一版本的js css文件已经被删除掉

了；就会出现很多js css文件404，你的项目就打不开了。

这种情况我假设我们的代码放到域名根目录的 front 文件夹中；就可以如下配置：

	# /front 目录的 html 文件客户端不加缓存；css js等仍然缓存
	# 域名根目录是执向的 /home/wwwroot/public
	location /front/ {
		#root 指的是 location 的前面部分目录结构 加上了root 之后上面的 location /front/ 指向的目录就是 /home/wwwroot/public/front/
		root   /home/wwwroot/public;
		#index  index.html index.htm
		if ($request_filename ~* .*\.(?:htm|html)$)
		{
			add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
		}
		if ($request_filename ~* .*\.(?:js|css)$)
		{
			expires      1d;
		}
		if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$)
		{
			expires      30d;
		}
	}

加了上面的代码nginx的网站配置文件中；用户访问 /front/index.html 时候；html文件就不会缓存到本地了。