Configuration steps to disable browser caching in a vue project
This article mainly explains "the configuration steps of disabling browser caching in vue project". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn the configuration steps of disabling browser caching in the vue project.
Project releases often encounter problems that need to clean the cache. Here is the actual way to disable caching for a project
Modify the index.html file meta configuration in the 1.public folder
2.vue cli build configuration (for vue3 below)
Add new configuration in vue.config.js
Const Timestamp = new Date () .getTime () module.exports = {configureWebpack: {output: {/ / output refactoring packaged compiled file name [module name. Version number (optional). Timestamp] filename: `[name]. ${Timestamp} .js`, chunkFilename:` [name]. ${Timestamp} .js`},}, css: {extract: {/ / packaged css file name add timestamp filename: `css/ [name]. ${Timestamp} .css`, chunkFilename: `css/ [name]. ${Timestamp} .css`},},}
3.Nginx configuration
Disable nginx caching and let the browser request the file every time it goes to the server instead of reading the cache file in the browser.
When the program is debugged and put online, you can turn on the nginx cache, save the server's bandwidth traffic, reduce some requests, and reduce the pressure on the server.
Configure the html file in the nginx.conf file by default plus header does not cache the configuration
The nginx cache configuration in the following actual project
Location ~. *\. (?: htm | html) ${add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";}
Nginx static resource cache settings https://codecat.blog.csdn.net/article/details/117604817
At this point, I believe you have a deeper understanding of the "configuration steps to disable browser caching in the vue project". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
