vue项目禁用浏览器缓存配置

清疚 2021-09-25 10:28 380阅读 0赞

### 项目发布版本会遇到经常需要清理缓存的问题,以下是项目禁用缓存的实际方法 ###

### 1.public文件夹中修改 index.html文件meta配置 ###

![image.png][]

### 2.vue cli 构建配置(针对vue3以下版本) ###

在vue.config.js新增配置

const Timestamp = new Date().getTime()
    module.exports = {
      configureWebpack: {
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号(可选).时间戳】
          filename: `[name].${Timestamp}.js`,
          chunkFilename: `[name].${Timestamp}.js`
        },
      },
      css: {
        extract: { // 打包后css文件名称添加时间戳
          filename: `css/[name].${Timestamp}.css`,
          chunkFilename: `css/[name].${Timestamp}.css`
        }
      },
    }

### 3.Nginx配置 ###

禁用掉nginx缓存，让浏览器每次到服务器去请求文件，而不是在浏览器中读取缓存文件。

当程序调试好上线后,可以开启nginx缓存,节省服务器的带宽流量，减少一些请求，降低服务器的压力。

![image.png][image.png 1]

在nginx.conf文件里配置html文件默认加header 不缓存配置

以下实际项目中nginx缓存配置

location ~ .*\.(?:htm|html)$ {
        add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
      }

## Nginx静态资源缓存设置 [https://codecat.blog.csdn.net/article/details/117604817][https_codecat.blog.csdn.net_article_details_117604817] ##

## 如有需要补充的内容,请联系作者 ##

[image.png]: /images/20210923/8eb088a597244a55b31c2ea79d8cdc6b.png
[image.png 1]: /images/20210923/d75c1303519e4a3f86957641ab66a0cf.png
[https_codecat.blog.csdn.net_article_details_117604817]: https://codecat.blog.csdn.net/article/details/117604817