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

项目发布新版本，部署线上后用户浏览器需要清理缓存

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

?

1 2 3 4

<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" />   <meta http-equiv="Cache" content="no-cache">

　

2.Nginx配置

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

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

　

?

1 2 3 4 5 6 7 8 9 10

location / {      #以下配置解决html不缓存         if ($request_filename ~* .*\.(?:htm|html)$)             {                   add_header Cache-Control "private, no-store, no-cache";             }       root /var/www/pod-app;       try_files $uri $uri/ /index.html;       index index.html;     }

　　

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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`     }   }, }

　　

在vue.config.js新增配置