确定vue的项目是否发版成功

48 阅读1分钟

问题:项目中会出现修改的东西没有更新,这是时前端修改的问题,还是运维发版没有成功?
回答:针对上述问题,可以将工程部署的时间进行一个记录,然后将这个时间显示在页面上不引人注间的地方。
实现步骤:
1.以vue工程为例,进入vue.config.js文件中配置一下工程部署时的时间

 const { defineConfig } = require('@vue/cli-service')
 const day = require('dayjs')
 module.exports = defineConfig({
 chainWebpack: config => {
  config.plugin('html').tap(args => {
     args[0].createDate = day(new Date()).format('YYYY/MM/DD hh:mm:ss')
      return args
    })
  },
})

2.将这个时间值显示在标签中不失为一个隐蔽又方便的办法

   <head>
    ...
    <meta name="version-build-time" content="<%= htmlWebpackPlugin.options.createDate %>"/>
    ...
  </head>

3.配置的步骤完成了,现在进行npm run build或者npm run serve,在浏览器控制台找到html页面那列,点开head,可以看到以下内容

   <head>
      ...
      <meta name="version-build-time" content="2023/03/24 02:23:55" />  
      ...
   </head>

写到最后:到这步就已经配置成功了,就可以确定到底是否发版成功