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;
}

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

相关推荐
信仰_27399324340 分钟前
Eureka 多层缓存机制详解
缓存·云原生·eureka
李小白662 小时前
Redis常见指令
数据库·redis·缓存
秋千码途2 小时前
Spring的@Cacheable取缓存默认实现
java·spring·缓存
托比-马奎尔15 小时前
Redis主从集群
数据库·redis·缓存
十五春会16 小时前
【uniapp】App平台展示pdf文件
pdf·uni-app
请叫我欧皇i17 小时前
保姆级教程vscode创建uniapp vue3+ts+pinia项目并实现自动导入、打包功能
ide·vscode·uni-app
海鸥两三17 小时前
Uni-App(Vue3 + TypeScript)项目结构详解 ------ 以 Lighting-UniApp 为例,提供源代码
vue.js·typescript·uni-app·1024程序员节
知识分享小能手17 小时前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手17 小时前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生20 小时前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节