After the Vue project package file is placed on the server, the browser has a solution to the cache problem

Every time you test a build or package an updated version and send it to the server, occasionally, it may not be updated to the latest code in time, and the browser has a cache problem.

Solution one:

Find webpack.prod.conf.js for the project initialized by vue-cli2.x or webpack, and find the configuration file vue.webpack.js for vue-cli3.0

   1. Define the version variable: const Version = new Date().getTime(); // The time stamp is used here to distinguish 

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].'+_Version+'js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+_Version+'js')
  },

Then directly after npm run build is packaged, you can see the js file name in the dist file with the version number in it

However, we found that in the default configuration in vue-cli, the names of css and js are hashed, so the names of the new version of css and js are different from the old version, and there will be no caching problem. Then it may be that when the packaged index.html is placed on the server, index.html may be cached on the server side, which requires the configuration of the server to prevent index.html from being cached.  

Solution two:

nginx configuration, so that index.html is not cached

When developing and debugging the web, I often encounter the trouble of emptying the cache or forced refreshing to test because of the browser cache (cache), and provide the settings of apache non-cache configuration and nginx non-cache configuration. There are two ways in the commonly used cache settings, both of which are set using add_header: Cache-Control and Pragma respectively.

add_header Cache-Control no-store;
add_header Pragma no-cache;

 

The no-cache browser will cache, but it will request the server when the page is refreshed or reopened. The server can respond with 304, if the file is changed, it will respond with 200. 
No-store browser does not cache, refresh the page and need to download the page again