Vue項目打包文件放在服務器后，瀏覽器存在緩存問題的解決方案

每次測試構建或者打包更新版本發到服務器上，導致偶爾會出現不能及時更新到最新代碼，瀏覽器存在緩存的問題。

解決方法一：

vue-cli2.x或者webpack初始化的項目找到webpack .prod.conf.js ，vue-cli3.0 的找到配置文件vue.webpack.js

   1.定義版本變量： const  Version = new Date().getTime(); // 這里使用的是時間戳 來區分 ，實際上不用加時間戳，webpack內部還自動變化hash值

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 文件名帶上里版本號

但是 ，我們發現 vue-cli里的默認配置，css和js的名字都加了哈希值，所以新版本css、js和就舊版本的名字是不同的，不會有緩存問題。那么就可能是打包好的index.html放到服務器里去的時候，index.html在服務器端可能是有緩存的，這需要在服務器配置不讓緩存index.html  

解決方法二：親測有效

nginx 配置，讓index.html不緩存

在開發調試web的時候，經常會碰到因瀏覽器緩存(cache)而經常要去清空緩存或者強制刷新來測試的煩惱，提供下apache不緩存配置和nginx不緩存配置的設置。在常用的緩存設置里面有兩種方式，都是使用add_header來設置：分別為Cache-Control和Pragma。

add_header Cache-Control no-store;
add_header Pragma no-cache;

 

 no-cache瀏覽器會緩存，但刷新頁面或者重新打開時 會請求服務器，服務器可以響應304，如果文件有改動就會響應200 
no-store瀏覽器不緩存，刷新頁面需要重新下載頁面