前言
线上现象：修改js、css的code，线上部署后，客户端浏览器并没有发生变化，依旧使用老的code。强制刷新浏览器有时也不好使
分析：没有检测到线上的code发生变化，读取的还是浏览器的缓存文件
正文
入口文件index.html
<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">
设置js、css压缩文件名为时间戳
文件vue.config.js
文件名中引入时间戳 ，让每次打包部署生成的文件名都不一样。
let Version = new Date().getTime();
module.exports = {
// Project deployment base
// By default we assume your app will be deployed at the root of a domain,
// e.g. https://www.my-app.com/
// If your app is deployed at a sub-path, you will need to specify that
// sub-path here. For example, if your app is deployed at
// https://www.foobar.com/my-app/
// then change this to '/my-app/'
baseUrl: BASE_URL,
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
productionSourceMap: SOURCE_MAP_FLAG, // 生产环境的 source map
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
.set('_c', resolve('src/components'))
.set('_conf', resolve('config'))
config
.plugin('provide')
.use(webpack.ProvidePlugin, [ {
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
} ]);
},
// https://my.oschina.net/u/4383170/blog/3385069
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: { // 一种方式，每次打包后的css文件名会变更新。
filename: 'css/[name].[' + Version + '].css',
chunkFilename: 'css/[name].[' + Version + '].css'
}
},
configureWebpack: config => {
config.output.chunkFilename = 'js/[name].[' + Version + '].js' // 这种方式适合设备缓存不严重的
config.externals = {
// 'iView': 'iview',
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'element-ui': 'ElementUI'
}
},
设置 nginx的文件有效期
// 设置以合适的有效期（较短），缓解服务压力
server {
listen 8099;
server_name pz.izaodao.com;
root /Users/liuxin/Documents/ideaProject/izaodao-admin/dist;
location / {
index index.html;
try_files uri/ /index.html;
}
location ~* .(html) {
access_log off;
# 客户端缓存时间超出x秒后则缓存过期。
add_header Cache-Control max-age=180;
}
}
验证效果
image.png
image.png
浏览器请求状态码 304（未修改）
自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应（称为 If-Modified-Since HTTP
标头）。服务器可以告诉 Googlebot 自从上次抓取后网页没有变更，进而节省带宽和开销。
参考鸣谢
nginx配置相关
https://www.cnblogs.com/changyaoself/p/12801166.html
浏览器缓存
https://blog.csdn.net/Amnesiac666/article/details/121101165
