uniapp APP使用web-view内嵌 h5 解决打包发版浏览器有缓存需要清除的问题

小周同学:

已于 2025-03-13 17:59:33 修改

阅读量834

点赞数 2

分类专栏： vue 文章标签： uni-app 前端缓存

于 2025-03-13 16:45:02 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_58495461/article/details/146235244

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

1.在当前项目根节点下的public目录下的index.html里面写入禁止缓存的 meta

在这里插入图片描述

  <!-- 解决前端发版缓存问题  start -->
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="Cache" content="no-cache">
  <!-- 解决前端发版缓存问题  end -->

2.配置服务器，使得index.html等关键文件不被缓存。例如，使用Nginx配置，可以添加以下指令：

 location=/index.html {
    add_header Cache-Control "no-cache, no-store";
}

3.在对应的响应拦截器中请求头里添加上“Cache-Control”设置为“no-cache”告诉浏览器不缓存
在这里插入图片描述

axios.defaults.headers["Cache-Control"] = "no-cache";

4.在vue.config配置webpack，让打包的时候给对应的js、css文件名后缀拼接上时间戳

const timeStamp= new Date().getTime()
module.exports = {
  configureWebpack: {
    output: {
      filename: `js/[name].js?v=${timeStamp}`,
      chunkFilename: `js/[name].js?v=${timeStamp}`,
    },
  },
 css: {
    // 输出重构 打包编译后的css文件名称，添加时间戳
    extract: {
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/[name].${timeStamp}.css`,
    },
  }
}

最后的打包效果，能看到css、js文件后缀都加上了时间戳
在这里插入图片描述