有时候更新了前端项目,但是访问的时候,还是旧的资源,或者会直接呈现空白的页面,显示加载的 css 和 js 资源是 404。可能导致的原因之一是 index.html 的内容浏览器已更新,但因为前端编译的 index.html 没有任何变化,而实际的 css,js 资源文件已经在编译过程中被移除并且重新编译生成新的 hash 名称的文件了。所以文件已经不存在了。
这个问题在使用 CDN 的时候尤其明显复现。解决这个问题的方式则是在 index.html 文件头部增加 Cache-Control=no-cache, no-store, must-revalidate, Pragma=no-cache 和 Expires=0 的设置,可参考 https://github.com/plugins-world/oauth-redirect-extension-download/blob/main/src/index.html#L6-L8
具体代码如下:
<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">
https://discuss.plugins-world.cn/post/Fc5z2RG0