Example of disabling browser cache configuration in Vue project

When releasing a project, you will often encounter the problem of needing to clean up the cache. Here is the actual method to disable the cache for the project.

1. Modify the meta configuration of the index.html file in the public folder

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

2.vue cli build configuration (for versions below vue3)

Add configuration in vue.config.js

const Timestamp = new Date().getTime()
module.exports = {
  configureWebpack: {
    output: { // Output the name of the file after reconstruction, packaging and compilation [module name. version number (optional). timestamp]
      filename: `[name].${Timestamp}.js`,
      chunkFilename: `[name].${Timestamp}.js`
    },
  },
  css: {
    extract: { // Add timestamp to the name of the CSS file after packaging filename: `css/[name].${Timestamp}.css`,
      chunkFilename: `css/[name].${Timestamp}.css`
    }
  },
}

3. Nginx configuration

Disable nginx cache and let the browser request files from the server each time instead of reading cached files in the browser.

After the program is debugged and launched, you can enable nginx cache to save server bandwidth, reduce some requests, and reduce server pressure.

Configure the HTML file in the nginx.conf file to add a header by default and not cache the configuration

The following actual project nginx cache configuration

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

Nginx static resource cache settings https://www.jb51.net/article/222620.htm

This is the end of this article about the case of disabling browser cache configuration in vue project. For more relevant content about disabling browser cache configuration in vue project, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!