前端开发必备技能知识笔记-vue项目中添加版本号（console显示）

为了方便查看项目发布的版本等基本信息，可以直接 f12 开发者模式下查看，以下代码就是实现读取package.json中的“name”、“description”、“version”等的数据在console中显示。

 

首先需要引入package.json，得到需要显示的信息数据

package.json文件

引入package.json文件，如果报错有可能是package.json文件的路径错误

以下代码实现信息在console中显示（直接全选复制不要去掉里面的空格）

     // 在console中显示信息
    copyRightConsole(packageInfo) {
        /* 样式代码 */
        const projectNameStyle = 'font-size: 20px;font-weight: 600;color: rgb(244,167,89);';
        const descriptionStyle = 'font-style: oblique;font-size:14px;color: rgb(244,167,89);font-weight: 400;';
        const versionStyle = 'color: rgb(30,152,255);padding:8px 0 2px;';
        const dateTimeStyle = 'color: rgb(30,152,255);padding:0 0 5px;';

        /* 内容代码 */
        const projectName = packageInfo.name || '';
        const description = packageInfo.description || '';
        const version = `版 本 号：${packageInfo.version}    【ArcGIS API for JavaScript 版本：${packageInfo?.dependencies?.['@c_arcgis/core'] || packageInfo?.dependencies?.['@arcgis/core']}】`;
        const dateTime = `编译日期：${moment().format('YYYY-MM-DD HH:mm:ss')}`;

        // 空格有意义，不要格式化
        console.log(`%c${description} %c${projectName}
%c${version}
%c${dateTime}`, projectNameStyle, descriptionStyle, versionStyle, dateTimeStyle);
    }

---

实现效果：

显示的内容可以自己按需调整，不一定就是显示package.json的信息，以上代码只是模板而已