uniapp 打包H5页面时候清除手机缓存问题

最近遇到一个情况:

uniapp 写了一个H5 页面,挂在一个小程序上面,但是每次更新代码,新增新功能,总是有的用户看到的还是上一个版本的样式,前端打包的时候,已经在Uniapp项目的根目录下面新建了一个文件vue.config.js来控制:

vue.config.js

js 复制代码
let filePath = 'static/js/'; // 默认文件路径
let TimeStamp = new Date().getTime(); // 时间戳
let version = '-v2.0.6-'

module.exports = {
	configureWebpack: {
		output: { // filePath: 路径 name: 默认文件名 Version: 版本号 TimeStamp: 时间戳; 重构文件名
			filename: `${filePath}[name].${version}${TimeStamp}.js`,
			chunkFilename: `${filePath}[name].${version}${TimeStamp}.js`
		},
	},
	devServer: {}
}

然后将项目打包,找到路径./static/js/,所有的js文件都是附带时间戳的,如下所示:

但是代码发布成功以后还有一些用户手机上还是上一个版本的样式:

于是考虑会不会是发布到服务器的时候配置不对:

于是就有了一下解决方式:
将打包好的uniapp项目部署到nignx,找到nignx的配置文件,配置如下内容禁用缓存。

js 复制代码
location / {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

这样以后再没有出现过缓存问题造成的困扰

相关推荐
星星点点洲2 分钟前
【缓存与数据库结合方案】伪从技术 vs 直接同步/MQ方案的深度对比
数据库·缓存
王哈哈的学习笔记2 小时前
uniapp小程序使用echarts
前端·小程序·uni-app
好想有猫猫2 小时前
【Redis】服务端高并发分布式结构演进之路
数据库·c++·redis·分布式·缓存
yrldjsbk2 小时前
uniapp小程序开发入门01-快速搭建一个空白的项目并预览它
uni-app
JavaDog程序狗4 小时前
【实操】uniapp纯前端搞个识别植物花草小程序
前端·vue.js·uni-app
七七小报4 小时前
uniapp-商城-42-shop 后台管理 分包
前端·uni-app
爱的叹息4 小时前
MyBatis缓存配置的完整示例,包含一级缓存、二级缓存、自定义缓存策略等核心场景,并附详细注释和总结表格
缓存·mybatis
山猪打不过家猪5 小时前
(六)RestAPI 毛子(外部导入打卡/游标分页/Refit/Http resilience/批量提交/Quartz后台任务/Hateoas Driven)
网络·缓存
李宥小哥7 小时前
Redis01-基础-入门
缓存·中间件
七七小报8 小时前
uniapp-商城-40-shop 购物车 选好了 进行订单确认4 配送方式3 地址编辑
uni-app