uni.app 开发微信公众号 h5 网页项目，发布更新后，微信浏览器网页存在缓存问题

Tips

---

最近在发布项目时 收到反馈说, 文件已经更新上去了 但是浏览器显示的还是以前的页面

解决方案

• 设置html页面不让浏览器缓存： 在index.html文件中增加标签禁止浏览器缓存
• 设置webpack打包生成的文件名规则：配置vue.config.js

// index.html 文件中增加 meta 标签

<meta http-equiv='Cache-Control' content='no-cache, no-store, must-revalidate' />
<meta http-equiv='Pragma' content='no-cache' />
<meta http-equiv='Expires' content='0' />


// 在项目根目录创建 vue.config.js 文件， 添加 打包 规则

const Timestamp = new Date().getTime(); //当前时间为了防止打包缓存不刷新，所以给每个js文件都加一个时间戳
module.exports = {
    filenameHashing:true, //建议开启 防止静态资源(图片)替换后 未即时生效
    configureWebpack: {
        output: { // 输出重构  打包编译后的 文件路径  文件名称  【时间戳】
            filename: `./static/js/[name].${Timestamp}.js?v=${Timestamp}`,
            chunkFilename: `./static/js/[name].${Timestamp}.js?v=${Timestamp}`
        }
    }
}

// 如果是nginx部署的话，设置nginx 不缓存 html 文件

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

原文链接 (opens new window)