如何确定前端工程是否成功部署
项目中会出现修改的东西没有跟新,这时会存在是前端的修改问题,还是后端的部署问题
可以将每次工程部署时的时间进行一个记录,然后将这个时间显示在页面上不引人注意的地方
- 以 vue 工程为例,进入 vue.config.js 文件中配置一下工程部署时的时间
module.exports = {
....
chainWebpack: config => {
config.plugin('html').tap(args => {
const date = new Date()
args[0].createDate = date
return args
})
...
},
...
}
将这个时间值显示在标签中不失为一个隐秘又方便的办法
- 说干就干,直接上代码,进入 public 文件中的 index.html 文件
<head>
...
<meta name="version-build-time" content="<%= htmlWebpackPlugin.options.createDate %>" />
...
</head>
配置的步骤就完成了,现在进行 npm run dev 或者 npm run build,在浏览器控制台中找到 html 那列,点开 head,可以看到如下的内容
<meta name="version-build-time" content="Thu Mar 31 2022 09:47:23 GMT+0800 (中国标准时间)">
总结:到这一步就已经配置成功了,就可以确定到底是工程部署没有成功,还是前端的包发错了