vue项目发版，前端页面自动提示用户刷新页面

置顶

Fhm123456_

于 2023-12-15 11:00:45 发布

阅读量1.7k

点赞数 12

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript elementui

本文链接：https://blog.csdn.net/Fhm123456_/article/details/135012102

文章介绍了如何在前端开发中通过创建version.js和version-update.js文件，实现在代码更新时自动提示用户刷新页面，包括写入版本号到HTML元数据和定期检查新版本的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：由于前端发版用户不及时刷新页面就会造成你看到的页面其实是发版之前的页面，需要每次手动刷新，现在封装2个方法，当有前端代码更新，自动提示用户手动刷新

首先，根目录下创建两个js文件，比如version-update.js这是更新用的，version.js这个是将特定标识写入项目中，以此来区分项目是否更新

version代码如下：

// npm build version
const vueconfig = require('./vue.config.js')
const packageConfig = require('./package.json')

const VERSION_NO = packageConfig.version || ''

const dist_path = `./${vueconfig.outputDir}/homepage.html`

// 获取dist中homepage页面，并在其中写入版本号
const fs = require('fs')
const path = require('path')
const distPath = path.join(__dirname, dist_path)
let htmlContent = fs.readFileSync(distPath, 'utf8')
htmlContent = htmlContent.replace('<head>', `<head><meta name="version_no" content="${VERSION_NO}" >`)
fs.writeFileSync(distPath, htmlContent, 'utf8')

// eslint-disable-next-line no-console
console.log('[ 版本打包成功 ] >', VERSION_NO)

module.exports = VERSION_NO

version-update.js代码如下：