Vue重新部署后刷新页面

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

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

实现步骤:

1.创建build-pro.js文件

Vue重新部署后刷新页面_第1张图片

写入代码:

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文件中,修改打包命令

Vue重新部署后刷新页面_第2张图片

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()

      }

}

 打包成功后的效果:

Vue重新部署后刷新页面_第3张图片

Vue重新部署后刷新页面_第4张图片

 

你可能感兴趣的:(Vue,vue.js,前端,javascript)