前言

线上现象：修改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$ uri/ /index.html;
}
location ~* .(html) ${ access_log off; add_header Cache-Control max-age=no-cache; } location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
access_log off;
# 客户端缓存时间超出x秒后则缓存过期。
add_header Cache-Control max-age=180;
}
}