Vue打包文件放在服务器，浏览器存在缓存问题的解决

因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。

解决方法：找到webpack .prod.conf.js

   1.定义版本变量： const  Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ，也可以自己定义成别的如：1.1

   2.修改要生成的js和css文件的配置项，把刚刚声明的版本拼接进要生成的文件名中；

   output: {

        path: config.build.assetsRoot,

         filename: utils.assetsPath('js/[name].[chunkhash].' + Version + '.js'),

        chunkFilename: utils.assetsPath('js/[id].[chunkhash].' + Version + '.js')

    },

然后直接 npm run build 打包后 就可以看到dist 文件里的js 文件名带上里版本号

自我总结：很多人说这种方法没有用，我认为是有用的。现在我从原理上给大家分析一下为什么这个方法有用。首先当用户打开一个链接的时候，浏览器首先先去代理服务器查看链接是否有缓存。如果有就返回。没有就去DNS服务器解析域名，得到服务器的IP地址。然后通过TCP/IP三次握手建立HTTP链接。服务器收到请求才把客户端请求的html代码返回给客户端浏览器。浏览器解析html代码渲染，解析的时候发现有CSS,JS文件要引入。就需要再次去服务器获取代码，因为生成的JS/CSS文件加了时间戳的文件名，请求的时候检测缓存的时候是没有的，所以就直接去服务器从新获取。避免了代码更新的缓存问题。当然代码更新过后，还是要在链接后加随机字符串，这样用户进去就不会遇到缓存。