vue项目每次上完线之后浏览器会有缓存

vue项目上完线后,浏览器不会立刻加载最新的内容,而是需要强刷浏览器,解决这个问题需要下面三个步骤:

1. 打包配置

output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash].js', },

这样配置后,有改动的文件打包后会生成不同的hash值

2. 因为js文件都是在index.html文件中引入的,如果只是生成了不同的js文件,但是index.html中引入的文件却没有变,这样还是会出现缓存问题,所以也需要在index.html中加入禁用缓存

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />

3. 这样配置完后前端是不会出现缓存了,但是还需要nginx配合,才能保证不加载相同的index.html入口文件

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