angular+html5打包成app时,android手机会出现缓存问题
这个项目使用了gulp打包压缩js/css,使用了每改一次内容就修改文件名字方式来防止缓存
一、使用npm run hashmark 修改文件名
安装npm包里的hashmark,运行
npm i hashmark
在配置文件中package.json中,运行scripts里的命令(npm run xxxx)
"scripts": {
"hashmark1": "hashmark -l 8 -r --cwd app/dist/css/ \"bundle.css\" {name}.{hash}{ext} | map-replace -m \"<[^>]+>\" app/dist/home.html",
"hashmark2": "hashmark -l 8 -r --cwd app/dist/js/ \"bundle.js\" {name}.{hash}{ext} | map-replace -m \"<[^>]+>\" app/dist/home.html",
"hashmark": "npm run hashmark1 && npm run hashmark2"
},
例
- hashmark1:就是把app/dist/css下的bundle.css文件修改文件名bundle.(随机数).css
并且替换掉app/dist/home.html里的bundle.css; - hashmark2同理 替换js;
- hashmark 运行hashmark1和hashmark2
npm run hashmark1
npm run hashmark2
npm run hashmark
home.html替换的内容
<link type="text/css" rel="stylesheet" href="/css/bundle.7c3a8cbb.css?v=2018-7-24--17:1:15">
<script data-main="/js/bundle.d0628d89.js?v=2018-7-24--17:1:15" src="/js/require.min.js"></script>
二、新增入口页面进行页面跳转,防止home.html有缓存
home.html为首页,新增页面只是为了跳转到home.html中
如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全筑e家</title>
<script>
window.location.href = 'home.html?v='+ Math.random();
</script>
</head>
<body>
</body>
</html>