vue-cli4.0 项目发布浏览器缓存问题解决?

发布于 2022-09-12 22:58:08 字数 1094 浏览 15 评论 0

我看vue-cli里的默认配置,css和js的名字都加了哈希值
image.png
还会有缓存问题应该是index.html缓存,但是查教程的时候发现,很多建议去掉默认hash,给文件名添加时间戳,想知道这么做是否有必要

module.exports = {
    filenameHashing:false, // 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了.
   // 
   configureWebpack: {    //重点
        output: { // 输出重构 打包编译后的js文件名称,添加时间戳.
             filename: `js[name].${ timeStamp }.js`,
               chunkFilename: `js[name].${ timeStamp }.js`,
        }
    },
    css: { //重点.
        extract:{ // 打包后css文件名称添加时间戳
             filename:`css/[name].${ timeStamp }.css`,
             chunkFilename:`css/[name].${ timeStamp }.css`,
        }
    }
};

还有对于index.html缓存问题添加如下meta字段,为什么还要配置ngnix add_header Cache-Control "no-cache, no-store"这样是否重复,有什么意义?

 <!-- 处理浏览器缓存 -->
    <meta http-equiv="pragram" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="expires" content="0">

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

终难遇 2022-09-19 22:58:08
  1. 时间戳和 hash 的作用一样,工作原理也一样,任选一个就行
  2. index.html 里 <meta> 控制的缓存规则只有浏览器能理解,但实际上从源服务器到用户浏览器,中间可能经历很多环节,也存在多个缓存的可能,在源服务器上设置 nginx 进行缓存控制是合理的
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文