解决vue打包后的文件放在服务器上，浏览器有缓存的问题

每次项目发布新版的时候，前端打包后的文件放在服务器上，浏览器读取的代码没有及时更新，导致有时会有缓存的问题。

前端解决办法：

在html页面加meta标签

1 2	<meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

找到项目中名为webpack.prod.conf.js的文件，用js来获取当时的时间，根据时间戳来划分版本号。然后在js和css文件名上加上版本号，每次上传到服务器的名字不一样，服务器就会识别出来，加载最新上传的这一版本了。（分别更改相应的代码片段，加上时间戳即可）

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


output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name][chunkhash].' + Version + '.js'),
    chunkFilename: utils.assetsPath('js/[id][chunkhash].' + Version + '.js')
},

new ExtractTextPlugin({
            filename: utils.assetsPath('css/[name].[contenthash].' + Version + '.css')
        }),

然后执行npm run build，再去打包后的dist文件夹下去看打包后的js和css文件名已经加上了时间戳的后缀了

但是index.html在服务器端有时还是会有缓存的，需要在服务器端配置下nginx，让index.html文件也不缓存

1
2
3

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

no-cache, no-store可以只设置其中一个

no-cache浏览器会缓存，但刷新页面或者重新打开时，会请求服务器，服务器可以响应304，如果文件有改动就会响应200

no-store浏览器不缓存，刷新页面需要重新下载页面