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

最新推荐文章于 2025-08-29 11:50:46 发布

原创

最新推荐文章于 2025-08-29 11:50:46 发布 · 置顶 · 1.9k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript #elementui

背景：由于前端发版用户不及时刷新页面就会造成你看到的页面其实是发版之前的页面，需要每次手动刷新，现在封装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代码如下：