在开发移动端网页的时候如何解决缓存带来的问题？

Question

我是使用手机通过局域网访问电脑的IP进行测试、调试WAP网页。

遇到的问题：
每次在电脑端更改页面样式、交互之后，由于缓存的原因在手机浏览器上面都未能即时展示，需要手动清除缓存之后才能看到效果。这样给开发、测试造成很大的麻烦。

请问如何解决？

Answer 1

推荐使用chrome浏览器模拟手机进行调试，打开chrome隐身模式，隐身模式下就没有任何缓存了，如果你非要在手机上调试，我只有两个方法：

1.打开浏览器的无痕浏览模式
2.在url后面加当前时间戳。

加时间戳这个可以秒杀微信内置浏览器的缓存。试一下吧

Answer 2

如楼上所说后面带上?v=1437624162252

html<link rel="stylesheet" type="text/css" href="/public/src/index.min.css?v=1437624162252">
<script type="text/javascript" src="/public/src/index.min.js?v=1437624162252"></script>

Answer 3

我一般是用gulp，生成一个当前版本的json文件，再用后台语言读取并显示最新版本的文件

Answer 4

用browser-sync，reload就可以清缓存，还可以远程调试微信(基于weinre)，可配合gulp一起使用

Answer 5

在给文件打包的时候，加上md5码，保证每一次的文件都是与缓存里的不相同，达到防缓存干扰。