四川煤矿标准化建设网站,用ps怎么做学校网站页面,濮阳做网站公司,wordpress验证评论邮箱问题描述
在使用vue脚手架搭建前端工程时#xff0c;经常会遇到打包上线后的缓存问题。具体表现为#xff0c;当程序版本升级时#xff0c;用户仍然访问到旧版本的页面。许多开发者会直接在index.html中加入类似以下代码来解决缓存问题#xff1a;
meta http-equiv经常会遇到打包上线后的缓存问题。具体表现为当程序版本升级时用户仍然访问到旧版本的页面。许多开发者会直接在index.html中加入类似以下代码来解决缓存问题
meta http-equivExpires content0
meta http-equivPragma contentno-cache
meta http-equivCache-control contentno-cache
meta http-equivCache contentno-cache这种方法虽然解决了缓存问题但却导致用户每次访问程序都需要重新请求服务器无法利用静态资源的缓存从而增加了流量消耗和网络压力。
需求澄清
实际上我们需要解决的问题并不是简单地要缓存或不要缓存而是希望根据情况灵活控制
每次程序升级后用户不会因为缓存问题而访问到旧版本的程序。如果程序没有升级用户可以利用静态资源的缓存减少对服务器的请求。
解决原理
在vue脚手架的每次打包过程中会给生成的静态资源文件名添加哈希后缀并 index.html中引入带有相应哈希后缀的静态资源文件。因此每个版本的静态资源都是被正确引入的不会因升级而出现缓存问题。因此我们只需让index.html不被缓存而让其他静态资源可以被缓存即可满足需求。
然而要实现让静态资源被缓存但让index.html不被缓存则需要借助服务器配置通过设置针对index.html请求的header来控制缓存。
具体实现
Nginx服务器配置
如果你使用Nginx服务器你可以简单地添加以下配置
location /index.html {add_header Cache-Control no-cache, no-store;
}Apache服务器配置
如果你使用Apache服务器你可以在VirtualHost中增加以下配置
Files index.html Header set Cache-Control no-cache, no-store /Files修改webpack的配置文件
同时你也可以通过修改webpack的配置文件来实现对静态资源文件名的哈希处理以确保静态资源能够被有效缓存 onst Timestamp new Date().getTime();// Vue.config.js 配置选项
module.exports {configureWebpack: { // webpack 配置output: { // 输出重构 打包编译后的 文件名称:【模块名称.contenthash】使用contenthash保证了文件被修改才会重新生成新的文件名让用户能有效使用浏览器缓存减轻服务器压力filename: static/js/[name].[contenthash:8].js,chunkFilename: static/js/[name].[contenthash:8].js},}
}通过以上步骤你可以灵活地控制缓存让用户在程序升级后访问到最新版本的页面同时减少了静态资源的重复请求优化了用户体验和网络流量消耗。
