There is a cache in the vue project release, and the official environment is not updated (solution)

Foreword: Every time the test is built or the updated version is packaged and sent to the server, occasionally the latest code cannot be updated in time and the browser has caching problems.

1. Anti-caching of js and css files

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 internally in webpack.

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

2. Anti-caching of html files

Method 1. Linux server settings nginx disables html cache

When developing and debugging web, we often encounter the trouble of clearing the cache or forcing a refresh to test due to browser cache. Here are the settings for apache non-caching configuration and nginx non-caching configuration. There are two methods in common 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;

server {
        listen       80;
        server_name  test.exmaple.cn;
 
 
        location / {
                if ($request_filename ~* .*\.(?:htm|html)$)  ## 配置页面不缓存html和htm结尾的文件
                {
                   add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
                }
                root /web/;
                index index.html;
                try_files $uri $uri/ /index.html =404;
        }
}

 Method 2, add index.html 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.json in the public static directory and change the version number every time a version is released. 

{
    "version": "0.0.1"
}

2. Create a new libs/versionUpdate.js file in src

import axios from 'axios'
 
const isNewVersion = () => {
  let url = `//${window.location.host}/version.json?t=${new Date().getTime()}`
  axios.get(url).then(res => {
    if (res.status === 200) {
      let vueVersion = res.data.version || '1.0.0'
      let localVueVersion = localStorage.getItem('vueVersion')
      localStorage.setItem('vueVersion', vueVersion)
      if (localVueVersion && localVueVersion != vueVersion) {
        alert('检测到新版本，请点击确认刷新页面哦')
        window.location.reload(true)
        return
      }
    }
  })
}
 
export default {
  isNewVersion
}

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

import versionTood from '@/libs/versionUpdate'
 
router.beforeEach(( to, from, next ) => {
  //判断当前代码版本是否与服务器中代码版本一致，如不一致则刷新页面获取最新
  versionTood.isNewVersion();
}