Vue重新部署后刷新页面

需求：当我们的项目打包重新部署后，让用户在访问系统时，能够自动刷新，而不是需要用户手动刷新

思路：项目打包完成后，生成版本号(version.json)，在用户进行路由的跳转时，对比当前版本号和localStorage存储的版本号，若不同，则将当前版本号存入localStorage，并强制页面刷新

实现步骤：

1.创建build-pro.js文件

写入代码：

console.log('build > 文件开始执行！')

const fs = require('fs')

const path = require('path')

function getRootPath(...dir) {

  return path.resolve(process.cwd(), ...dir)

}

const runBuild = async() => {

  try {

    const OUTPUT_DIR = 'dist'

    const VERSION = 'version.json'

    const versionJson = {

      version: 'V_' + Math.floor(Math.random() * 10000) + Date.now()

    }

    fs.writeFileSync(getRootPath(`${OUTPUT_DIR}/js/${VERSION}`), JSON.stringify(versionJson))

    console.log(`version file is build successfully!`)

  } catch (error) {

    console.error('version build error:\n' + error)

    process.exit(1)

  }

}

runBuild()

console.log('build > 文件执行结束！')

2.在package.json文件中，修改打包命令

3.在前置路由守卫中进行判断

async function checkAppNewVersion() {

  const url = `/js/version.json?t=${Date.now()}`

  let res = null

  try {

    res = await axios.get(url)

  } catch (err) {

    console.error('checkAppNewVersion error: ', err)

  }

  if (!res) return

  const version = res.data.version

  console.log(url)

  if (version && version !== localStorage.getItem('version')) {

    localStorage.setItem('version', version)

    console.log('更新')

    window.location.reload()

  } else {

    console.log('不更新')

  }

}

router.beforeEach(async(to, from, next) => {

// 除了跳转到'/'之外，都进行版本号对比

if (from.path !== '/') {

        checkAppNewVersion()

      }

}

 打包成功后的效果：