Vue 打包上线后的缓存问题

问题描述

在使用vue脚手架搭建前端工程时，经常会遇到打包上线后的缓存问题。具体表现为，当程序版本升级时，用户仍然访问到旧版本的页面。许多开发者会直接在index.html中加入类似以下代码来解决缓存问题：

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

这种方法虽然解决了缓存问题，但却导致用户每次访问程序都需要重新请求服务器，无法利用静态资源的缓存，从而增加了流量消耗和网络压力。

需求澄清

实际上，我们需要解决的问题并不是简单地要缓存或不要缓存，而是希望根据情况灵活控制

• 每次程序升级后，用户不会因为缓存问题而访问到旧版本的程序。
• 如果程序没有升级，用户可以利用静态资源的缓存，减少对服务器的请求。

解决原理

在vue脚手架的每次打包过程中，会给生成的静态资源文件名添加哈希后缀，并 index.html中引入带有相应哈希后缀的静态资源文件。因此，每个版本的静态资源都是被正确引入的，不会因升级而出现缓存问题。因此，我们只需让index.html不被缓存，而让其他静态资源可以被缓存，即可满足需求。

然而，要实现让静态资源被缓存，但让index.html不被缓存，则需要借助服务器配置，通过设置针对index.html请求的header来控制缓存。

具体实现

Nginx服务器配置

如果你使用Nginx服务器，你可以简单地添加以下配置：

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

Apache服务器配置

如果你使用Apache服务器，你可以在VirtualHost中增加以下配置：

<Files "index.html">  
    Header set Cache-Control "no-cache, no-store"  
 </Files>

修改webpack的配置文件

同时，你也可以通过修改webpack的配置文件来实现对静态资源文件名的哈希处理，以确保静态资源能够被有效缓存：

 onst Timestamp = new Date().getTime();
 // Vue.config.js 配置选项
module.exports = {
	configureWebpack: { // webpack 配置
        output: { // 输出重构  打包编译后的 文件名称:【模块名称.contenthash】使用contenthash保证了文件被修改才会重新生成新的文件名，让用户能有效使用浏览器缓存，减轻服务器压力
            filename: `static/js/[name].[contenthash:8].js`,
            chunkFilename: `static/js/[name].[contenthash:8].js`
        },
    }
}

通过以上步骤，你可以灵活地控制缓存，让用户在程序升级后访问到最新版本的页面，同时减少了静态资源的重复请求，优化了用户体验和网络流量消耗。