Problem Description
When building front-end projects with vue scaffolding, they are often troubled by caching problems. The specific manifestation is that when the program version is upgraded, users are still accessing old pages due to caching, and then many students are very violent and directly add them to index.html Up these few lines of code:
<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">
The cache problem was solved during the upgrade, but it directly caused the user to re-request the server every time they access your program . All static resources can no longer be cached, which wastes traffic and increases network pressure.
Need clarification
The problem we really need to solve is not simply to cache or not to cache, but to expect that depends on the situation:
1. After each program upgrade, the user will not execute the old program because of the cache problem.
2. If the program is not upgraded, the user's request for static resources can use the cache.
Solution principle
Since vue scaffolding will add a hash suffix to the name of the static resource file that is typed every time it is packaged, and the corresponding hash suffix is also added to index.html when it is introduced, so the static resources of each version are brand new. Don't worry about caching problems caused by the upgrade. Then just let index.html not be cached and other static resources can be cached to achieve the requirements.
The js file generated after vue-cli is packaged
It is easy to make static resources cache, the problem is how to make only index.html not cache . Here we can no longer rely solely on front-end code to achieve this, we need to use server configuration. Through server configuration, the header when requesting index.html is set separately to achieve the purpose of controlling the cache.
Implementation
If you use Ngnix:
Ngnix is relatively easy to implement, just add the following configuration:
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
If you use Tomcat:
Tomcat is a bit more troublesome, you need to develop and configure a filter (Filter), if you only understand the front-end, you may need to ask the back-end brothers for help.
1. First, we have to write a filter in java:
Note: The path should be consistent with the configuration of the third step
2. Then we typed this filter into a jar package with any name and placed it in the tomcat/lib directory.
3. Finally, we need to modify the configuration file tomcat/conf/web.xml and add the following code above the end </web-app>:
MyFilter is the name you give to the filter, you can change it at will
It's not too much trouble, and most students should be able to handle it.