前言

線上現(xiàn)象：修改js、css的code，線上部署后，客戶端瀏覽器并沒有發(fā)生變化，依舊使用老的code。強(qiáng)制刷新瀏覽器有時也不好使

分析：沒有檢測到線上的code發(fā)生變化，讀取的還是瀏覽器的緩存文件

正文

入口文件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">

設(shè)置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, // 生產(chǎn)環(huán)境的 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' // 這種方式適合設(shè)備緩存不嚴(yán)重的
    config.externals = {
      // 'iView': 'iview',
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ElementUI'
    }
  },

設(shè)置 nginx的文件有效期

// 設(shè)置以合適的有效期（較短），緩解服務(wù)壓力
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;
}
}

驗(yàn)證效果

image.png

image.png

瀏覽器請求狀態(tài)碼 304（未修改）

自從上次請求后，請求的網(wǎng)頁未修改過。服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容。

如果網(wǎng)頁自請求者上次請求后再也沒有更改過，您應(yīng)將服務(wù)器配置為返回此響應(yīng)（稱為 If-Modified-Since HTTP
標(biāo)頭）。服務(wù)器可以告訴 Googlebot 自從上次抓取后網(wǎng)頁沒有變更，進(jìn)而節(jié)省帶寬和開銷。

參考鳴謝

nginx配置相關(guān)
https://www.cnblogs.com/changyaoself/p/12801166.html
瀏覽器緩存
https://blog.csdn.net/Amnesiac666/article/details/121101165