清除前端缓存的方式

1.定义

      浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。

2.类型

      缓存协商：Last-modified ，Etag

      彻底缓存：cache-control，Expires

3.解决方案（以vue举例）

①.修改 webpack.prod.conf.js 文件

const date = new Date();

const timestamp = date.getTime(); // 时间戳

const version = timestamp; // 打包时候的版本号

var webpackConfig = merge(baseWebpackConfig, {

  module: {

    rules: utils.styleLoaders({

      sourceMap: config.build.productionSourceMap,

      extract: true

    })

  },

  devtool: config.build.productionSourceMap ? '#source-map' : false,

  output: {

    path: config.build.assetsRoot,

    filename: utils.assetsPath(`js/[name].[chunkhash:8].${ version }.js?_t=${ timestamp }`),

    chunkFilename: utils.assetsPath(`js/[name].[chunkhash:8].${ version }.js?_t=${ timestamp }`)

  },

}

②. html 页面前面加 meta 标签，让所有的css/js资源重新加载 

③. 后端服务器 nginx 配置，让 index.html 不缓存

location = /index.html { add_header Cache-Control "no-cache, no-store"; }

④.vue.config.js或者 vue_loader.config.js

const version = new Date().getTime();

module.exports = {

  loaders: utils.cssLoaders({

    sourceMap: isProduction

      ? config.build.productionSourceMap

      : config.dev.cssSourceMap,

    extract: isProduction

  }),

  css: {

    // 是否使用css分离插件 ExtractTextPlugin

    extract: {

      // 修改打包后css文件名   // css打包文件，添加时间戳

      filename: `css/[name].${version}.css`,  

      chunkFilename: `css/[name].${version}.css`

    }

 },

  configureWebpack: {

      output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】

          filename: `[name].${process.env.VUE_APP_Version}.${version}.js`,

          chunkFilename: `[name].${process.env.VUE_APP_Version}.${version}.js`

      }

  }

}