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

最近遇到一个情况:
uniapp 写了一个H5 页面,挂在一个小程序上面,但是每次更新代码,新增新功能,总是有的用户看到的还是上一个版本的样式,前端打包的时候,已经在Uniapp项目的根目录下面新建了一个文件vue.config.js来控制:
vue.config.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的配置文件,配置如下内容禁用缓存。

location / {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

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

  • 11
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
当使用Uniapp打包H5之后,页面样式丢失可能是由于以下原因导致的: 1. 缺少引入样式文件:在页面中使用了一些自定义样式或第三方样式库,但是没有在页面对应的引入样式文件,导致样式无法生效。可以检查代码中是否正确引入了所需的样式文件。 2. 样式文件路径错误:样式文件的路径是相对于页面的,如果路径设置错误,就会导致样式无法正确加载。需要确认样式文件的路径是否正确,并且在代码中指定了正确的路径。 3. 样式文件加载失败:可能是由于网络问题或路径错误等原因导致样式文件无法加载成功,建议使用开发者工具查看网络请求是否正常,如果请求失败可以检查路径和网络设置。 4. 样式冲突或覆盖:当页面中存在样式冲突或者样式覆盖时,可能会导致页面样式部分丢失。可以使用开发者工具中的元素面板查看元素的样式,并检查是否存在样式冲突或者样式被覆盖的情况。 5. 浏览器兼容性问题:不同的浏览器对于某些CSS属性或特性的支持程度不同,可能会导致页面在某些浏览器中样式丢失。建议使用一些浏览器兼容性工具或者查看官方文档,确认所使用的CSS属性在目标浏览器中是否支持。 在调试过程中,可以通过查看控制台输出的错误信息、检查样式文件的引入和路径、查看网络请求和使用开发者工具等方法来定位和解决页面样式丢失的问题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值