vue项目部署优化之js，css部署客户端更新

前言

线上现象：修改js、css的code，线上部署后，客户端浏览器并没有发生变化，依旧使用老的code。强制刷新浏览器有时也不好使

分析：没有检测到线上的code发生变化，读取的还是浏览器的缓存文件

正文

入口文件index.html

设置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