如何在网络发布新版本时刷新前端页面？

1. 解决方案

创建一个文件version.json

{
  version: {{VUE_APP_BUILD_VERSION}}
}

定时去请求这个文件，将返回的version与当前环境变量中的VUE_APP_BUILD_VERSION做比较，
如果不同，则表示版本更新，就reload()。
因为当版本更新，请求到的version会更新，而本地的环境变量尚未更新。

export function checkVersion() {
  if (process.env.NODE_ENV === 'production') {
    window.setInterval(async () => {
      const version = await getVersion()
      if (version && version !== process.env.VUE_APP_BUILD_VERSION) {
        ElMessage({
          type: 'warning',
          message: 'New version launched, please wait for reloading.',
        })
        setTimeout(() => {
          location.reload()
        }, 3000)
      }
    }, 10 * 60 * 1000)
  }
}
export async function getVersion(): Promise<string> {
  const script = `/static/version/version.json?${Date.now()}`
  try {
    const content = await axios.get(script)

    const versionData: IVersionInfo = <IVersionInfo>content.data
    if (versionData) {
      return versionData.version
    }

    return ''
  } catch (error) {
    return ''
  }
}

那么version.json是如何更新的呢

2. .gitlab-ci.yml

使用gitlab的CI/CD部署环境
看一下.gitlab-cli.yml配置文件

variables:
  # variables下定义的变量，在全阶段都可以获取到
  PROJECT_NAME: 'name'
  VUE_APP_BUILD_VERSION: $CI_COMMIT_REF_NAME-${CI_COMMIT_SHA}
  # CI_COMMIT_REF_NAME和CI_COMMIT_SHA是runner设置的变量

stages:
  # 定义场景阶段
  - build
  - qa
  - release
  - prod

#下面是定义的任务
build:
  tags:    #指定哪个ci runner跑该工作
    - aws
    - docker
  stage: build    #执行的场景
  # when: manual    #manual手动，不设置就是自动
  image: ${PRIVATE_DTR_URL}/ops-basic/docker-compile-mu:node14-aws    #使用的docker镜像
  script:    #需要执行的脚本
    - VUE_APP_BUILD_VERSION=${VUE_APP_BUILD_VERSION} yarn build
  only:    #在哪个分支可以(该分支有新push时就会执行当前任务)
    - /^release\/.*?/
    - /develop/
    - /master/
  artifacts:    #artifacts 被用于在job作业成功后将制定列表里的文件或文件夹附加到job上，传递给下一个job
    name: '$CI_JOB_NAME-$CI_COMMIT_REF_NAME-$CI_COMMIT_SHA'
    expire_in: 1 weeks
    paths:    #需要传到下个任务的文件
      - deploy.sh
      - apps/web/dist

#----------------------- QA -----------------------
deploy_qa:
  tags:
    - aws
    - docker
  stage: qa
  # when: manual
  dependencies:    #运行本任务之前需要运行的任务
    - build
  variables:    #在本阶段可以使用的变量(下面deploy.sh就可以通过${ENV}获取到)
    ENV: qa
  only:
    - /develop/
  script:
    - source ./deploy.sh
#----------------------- RELEASE -----------------------
deploy_release:
  tags:
    - aws
    - docker
  stage: release
  # when: manual
  dependencies:
    - build
  only:
    - /^release\/.*?/
  script:
    - source ./deploy.sh

#----------------------- PROD -----------------------
deploy_prod_cn:
  tags:
    - aws
    - docker
  stage: prod
  when: manual
  dependencies:
    - build
  only:
    - /^release\/.*?/
  script:
    - source ./deploy.sh

那么version.json里为什么定义{{VUE_APP_BUILD_VERSION}}，如何替换成真正的版本号的呢，就在deploy.sh中。
grep -rl tttt /data/ 命令在 /data 目录下面搜寻包含tttt字符的命令
遍历dist下的文件，将{{VUE_APP_BUILD_VERSION}}替换成真正的version
因为variables下定义了VUE_APP_BUILD_VERSION的值，所以可以获取，如果不在variables下定义，就得在对应的任务下的variables下定义，才能在对应任务中获取到。

#!/bin/bash
sysOS=`uname -s`

# =============设置环境变量=============
BUCKET='...'

DEPLOY_SOURCE_PATH='./dist'

# =============替换变量=============
replaces=(
    "{{VUE_APP_BUILD_VERSION}}|$VUE_APP_BUILD_VERSION"
)
REPLACE_PATH=$DEPLOY_SOURCE_PATH
echo "============replace start============"
for i in "${replaces[@]}" ; do
    IFS='|' read -r -a replace <<< "${i}"
    replaceStr=${replace[0]}
    replaceValue=${replace[1]}
    echo "============before replace============"
    echo "replace env:($replaceStr) to value:($replaceValue)"
    grep "${replaceStr}" -rl $REPLACE_PATH || true
    if [ $sysOS == "Darwin" ];then
        grep "${replaceStr}" -rl $REPLACE_PATH | xargs -r sed -i "" "s|$replaceStr|$replaceValue|g" || true
    elif [ $sysOS == "Linux" ];then
        grep "${replaceStr}" -rl $REPLACE_PATH | xargs -r sed -i "s|$replaceStr|$replaceValue|g" || true
    fi
    echo "============after replace============"
done
echo "============replace end============"

#=============上传=============

echo "============start upload static files============"
aws --profile ${REGION}_${ENV} s3 cp $DEPLOY_SOURCE_PATH 's3://'$BUCKET'/'$DEPLOY_S3_PATH'' --recursive --exclude "*"  --include "*.svg" --content-type image/svg+xml
aws --profile ${REGION}_${ENV} s3 cp $DEPLOY_SOURCE_PATH 's3://'$BUCKET'/'$DEPLOY_S3_PATH'' --recursive --exclude "*.svg" --exclude "*.html";
aws --profile ${REGION}_${ENV} s3 cp $DEPLOY_SOURCE_PATH 's3://'$BUCKET'/'$DEPLOY_S3_PATH'' --recursive --exclude "*"  --include "*.html" --cache-control 'No-cache, No-store'

Z. 参考

gitlab-ci配置详解(一)
gitlab-ci配置详解(二)
grep -rl tttt /data/ 命令在 /data 目录下面搜寻包含tttt字符的命令

12月14日始
12月14日发布第一稿

SLuffy