近日在做的一个全静态项目,没有任何服务器逻辑,所以版本号策略也采用了纯前端的解决方案.

说实在话,其实都是被逼的,我只要修改一下服务器配置加简单的逻辑判断就可以了,但是后端工程师懒的搞,觉着巨复杂.

说到版本号,其实涉及到版本号有三个问题要考虑:版本发布问题 缓存和版本回滚问题 切换开发和维护环境的问题

其实方案很简单,类似于svn的版本策略,也就是如果有任何文件修改的话,都会更新一个版本号

具体如下:

1 主html不缓存,加载资源的文件不缓存
2 涉及到版本号的资源加载放在单独的文件中
3 app内部的静态文件(js,css涉及到版本号策略),针对图片需要自己独立判断

 

说起来很复杂,但是用起来比较简单.这其中唯一用到的一个技术就是SSI(Server-Side Include).

具体分为下面2个步骤

第一步:修改加载资源的代码

示例如下:
index.html

1 <!DOCTYPE HTML>
 2 <html lang=”en”>
 3 <head>
 4 <meta charset=”UTF-8″>
 5 <title>test</title>
 6 </head>
 7 <body>
 8 <!–#include file=”loadStaticFiles.inc” –>
 9 </body>
10 </html>

loadStaticFiles.inc

1 <script type=”text/javascript”>
2 var __version = “_dev”;
3 var loadStaticFilesStr = [ '<script src="'+__version+'/js/ga.js" type="text/javascript"><\/script>','<script src="'+__version+'/js/test.js" type="text/javascript"><\/script>','<!-- version:'+__version+' -->'].join(“”);
4 
5 document.write(loadStaticFilesStr);
6 </script>

也就是说在版本控制下的文件全部在一个__version名字的文件夹下
每次修改的时候都会有一个新的文件夹建立,之前的那个文件夹就可以删除掉了

第二步: 开启服务器的ssi

 

如果按照上面的做了,你会发现,没有达到你想要的效果.include的代码直接作为注释了.
所以这一步就是要让服务器支持SSI

nginx的开启方式非常简单:

1 location / {
2     autoindex on;
3     ssi on;
4     root   F:/workspace/;
5     index  index.html index.htm;
6 }

样就保证你的include能被服务器返回,如果报路径错误,调整路径就可以了

OK,到这,基本的版本控制就解决了
你在本地开发的时候,修改本地的__version变量就可以,发布的时候也是修改此变量

我的目录结构

怎么看前端用的那个es版本 前端版本号_缓存

 

还需要额外注意的问题:

1 客户端缓存问题.这个不需要担心,和你之前的缓存策略保持一致

2 安全问题,需要禁用执行程序权限