vue 项目发布显示日志

最新推荐文章于 2024-08-21 09:50:58 发布

Fei.heart.NullPointerException

最新推荐文章于 2024-08-21 09:50:58 发布

阅读量769

点赞数 2

文章标签： vue.js vue webpack

本文链接：https://blog.csdn.net/panfeigaoCSDN/article/details/130646437

版权

文章介绍了如何在vue.config.js中通过child_process模块获取git的branchName、lastCommitUser、lastCommitDate和lastCommitContent，并结合htmlWebpackPlugin将这些信息注入到index.html中，展示构建的分支、提交者、时间和详情。由于Jenkins的影响，时间格式未做校验，期待优化。

摘要由CSDN通过智能技术生成

这里有一种不使用任何插件的办法，利用webpack 新开一个线程拿到git log 输出到 index.html，打开控制台就可以看到

vue.config.js 中

const childProcess = require('child_process')
const branchName = childProcess.execSync('git rev-parse --abbrev-ref HEAD').toString().trim()
const lastCommitUser = childProcess.execSync('git log -1 --pretty=%an').toString().trim()
const lastCommitDate = childProcess.execSync('git log -1 --pretty=%cd ').toString().trim()
const lastCommitContent = childProcess.execSync('git log -1 --pretty=oneline').toString().trim()

需要 htmlWebpackPlugin

如果使用 chainWebpack

config.plugin("html").tap((args) => {
      args[0].lastCommitUser = lastCommitUser
      args[0].lastCommitDate = lastCommitDate
      args[0].lastCommitContent = lastCommitContent
      return args
    })

index.html 中

<!--
       构建时间: <%= new Date() %>
       分支名称：<%= htmlWebpackPlugin.options.branchName %>
       最近一次提交人：<%= htmlWebpackPlugin.options.lastCommitUser%>
       最近一次提交时间： <%= htmlWebpackPlugin.options.lastCommitDate%>
       最近一次提交详情：<%= htmlWebpackPlugin.options.lastCommitContent %>
       -->

输出结果：这里因为Jenkins 的关系没有做任何时间格式校验，欢迎各位大佬帮我改进