仿百度控制台输出、控制台输出版本等

原创

已于 2022-11-23 18:27:58 修改 · 289 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-11-23 09:22:35 首次发布

本文介绍了如何在前端项目中实现类似百度控制台的版本信息和定制化输出。通过在`index.html`中直接写入或者创建单独的配置文件如`vite.config.ts`，开发者可以方便地在控制台展示项目版本、发布时间和打包信息，为问题排查提供便利，同时也可针对特定用户群体提供隐藏信息。

需求：项目上线后，有时候出现问题，无法知道是哪个版本、发布时间、打包机器之类的信息，当然对于有特殊信息展示的，针对特定人群，那就需要在控制台进行记录一些东西，方便查看。
比如百度官网控制台就有程序员才看的到的：
在这里插入图片描述
对于类似的输入，下面介绍两种方式进行实现。

index.html中直接写

对于直接在index.html中写的方式，更倾向于静态的一些资源展示，比如图片，文案，链接等。这种直接借助script标签的嵌入写法就可以。index.html文件中代码如下：

 <script>
    console.log('index.html')
    console.log('我是index.html中打印的内容')
    console.log('index.html')
  </script>

![](https://img-blog.csdnimg.cn/7f8168aad833410b921ed48ca6c3ee90.png)
2.单独文件进行处理。（下面就以vite.config.ts为例）

import _ from 'lodash'; // 方法集合，下面可以生成多个“*”
const { name, version } = require('./package.json'); // 从package.json中获取信息
function getBuildVersion() {
  const base_version = version;
  function pad(n) {
    return n.toString().padStart(2, '0');
  }
  const now = new Date();
  const year = now.getFullYear().toStrin