Automatic cache clearance method for vue project deployment

Clear file cache

Add http-equiv (http response header)

By adding meta in the head tag, when the browser accesses, the static resource will be re-requested from the server. This method is only understood, but it is not recommended to use it. It will cause users to re-request the server every time they access the program. All static resources cannot use cache, waste traffic, and have great network pressure.

// Set the expiration time of the web page. Once the web page expires, it must be retransmitted to the server.<meta http-equiv="Expires" content="0">
// Set to prohibit the browser from viewing page content from the local machine's cache<meta http-equiv="Pragma" content="no-cache">
// Clear the cache and access this URL again to download it again<meta http-equiv="Cache-control" content="no-cache">

2. Add a time stamp to the packaged js and css files

When packaging the project, add a timestamp to the js and css files to ensure that the output file names will not be the same and configure them through .

// Get the current time stampconst timeStamp = new Date().getTime()
// Timestamp configuration = {
  // Packed file output path  outputDir: 'dist',
  configureWebpack: {
    // Output reconstruction Package and compiled js file name, add time stamp    output: {
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/[name].${timeStamp}.js`,
    }
  },
  css: {
    // Output reconstruction Package and compiled css file name, add time stamp    extract: {
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/[name].${timeStamp}.css`,
    }
  }
}

Understand: filename: refers to the name of the file listed in the entry (entry), and output after packaging, chunkFilename: refers to the name of the file not listed in the entry but needs to be packaged (lazy loaded file)

Clear the browser localStorage cache

1. The version value in the update is incremented upwards for each package 2. Medium. According to the version, determine whether to perform cache cleaning.

const VUE_APP_VERSION = require('../').version
const vers = ('appVersion')
if(VUE_APP_VERSION != vers){
  ()
  ('appVersion', VUE_APP_VERSION)
  ()
}

This is the article about vue project deployment and automatic cache clearance configuration. For more related vue automatic cache clearance content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!