解决vue框架更新代码后的浏览器缓存

      相信很多时候都会遇到这种场景，当我们迭代一个新的版本到服务器上后，用户往往需要清除缓存或者强制刷新才能看到更新后的东西，这对于业务上来说是一种很难受的场景。那么要怎么处理这种情况呢？
       最简单的解决方案就是在打包的时候对js文件添加时间戳，当然添加一个随机的hash值也是可以的。下面介绍目前最常用的两种框架vue-cli3和nuxt的添加方法。
      在vue-cli3中配置非常简单，首先我们要找到vue.config.js这个文件（如果没有就创建一个）。
      打开后在文件的最开始加入获取当前时间戳的代码：
 

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

然后在configureWebpack中修改output参数:

configureWebpack:{
   output: { // 输出重构  打包编译后的 文件名称  【模块名称.时间戳】
     filename: `[name].${Timestamp}.js`,
     chunkFilename: `[name].${Timestamp}.js`
   },
 },

这样打包后的代码就有时间戳了。


在nuxt的配置也差不多，首先找到nuxt.config.js这个文件。
同时也添加时间戳的代码在文件的最开始。
这些步骤都和vue-cli3的一样。但是nuxt对webpack的封装和脚手架有些不同，它自己暴露了一个
filenames可以修改打包后的文件名。具体配置参见官方文档。
      但是具体打包ssr的时候发现，这个filenames只修改了server端的文件名，并没有改变client端的文件名。这就很坑了。。。
     于是我找到了源码，在官方源码中可以看到它将webpack的output全部暴露了出来，那么我们直接在extend中修改
    output这个属性即可：
  

extend(config, ctx) {
      config.output.filename = `[name].${Timestamp}.js`;
      config.output.chunkFilename = `[name].${Timestamp}.js`;
}

注意不要直接修改output，因为它还有其它的配置。
自此我们的配置就全部完成了。