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

多纤果冻

已于 2022-04-23 11:58:56 修改

阅读量1.1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端工程化文章标签： nginx

于 2021-06-05 19:58:10 首次发布

原创博文，共同进步，转载需备注作者和出处

本文链接：https://blog.csdn.net/qq_37939251/article/details/117601812

前端工程化专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在项目发布时如何禁用缓存，包括修改public文件夹中的index.html、配置vue.config.js以添加时间戳到文件名，以及在Nginx中设置不缓存的策略。对于线上环境，可以适时开启Nginx缓存以优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

    <meta http-equiv="pragrma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="expires" content="0" />

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缓存,节省服务器的带宽流量，减少一些请求，降低服务器的压力。

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

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

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

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

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

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

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

3.Nginx配置

Nginx静态资源缓存设置 Nginx缓存设置_多纤果冻的博客-CSDN博客_nginx配置缓存

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