vue project releases a solution that does not update the cached formal environment.

Preface: Every time the test build or package update version is sent to the server, it occasionally causes the latest code to be unable to be updated in time, and the browser has cache problems.

1. JS and CSS files are cached

Define version variables: const  Version = new Date().getTime(); // The timestamp is used here to distinguish . In fact, there is no need to add a timestamp, and the hash value is automatically changed inside webpack

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

2. html file prevents cache

Method 1. Set nginx to disable html cache on Linux server

When developing and debugging the web, you often encounter the trouble of clearing the cache or forcing refresh to test due to browser cache. Provide settings for the apache non-cache configuration and nginx non-cache configuration. There are two ways to set the cache settings commonly used, both using add_header: Cache-Control and Pragma respectively.

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

server {
        listen       80;
        server_name  ;
 
 
        location / {
                if ($request_filename ~* .*\.(?:htm|html)$)  ## The configuration page does not cache files ending with html and html                {
                   add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
                }
                root /web/;
                index ;
                try_files $uri $uri/ / =404;
        }
}

Method 2. Add page

<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">

Method 3. (Vue-cli front-end code control)

1. Create a new version number in each release in the public static directory.

{
    "version": "0.0.1"
}

2. Create a new libs/file in src

import axios from 'axios'
 
const isNewVersion = () => {
  let url = `//${}/?t=${new Date().getTime()}`
  (url).then(res => {
    if ( === 200) {
      let vueVersion =  || '1.0.0'
      let localVueVersion = ('vueVersion')
      ('vueVersion', vueVersion)
      if (localVueVersion && localVueVersion != vueVersion) {
        alert('A new version has been detected, please click Confirm to refresh the page')
        (true)
        return
      }
    }
  })
}
 
export default {
  isNewVersion
}

3. Write in global routing interception. As long as the version number is different each time, reload the page and cooperate with the first step to understand the browser cache.

import versionTood from '@/libs/versionUpdate'
 
(( to, from, next ) => {
  //Judge whether the current code version is consistent with the code version in the server. If it is inconsistent, refresh the page to get the latest  ();
}

Summarize

This is the article about the solution that does not update the cached environment in the vue project. For more related vue project releases cached solutions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!