Electron-vue 日志

electron-vue项目开发过程中，日志信息可以帮助我们快速的定位错误，因此快速的找到日志位置，能提高我们的开发效率

一、默认日志保存位置

electron-vue 日志信息默认保存在 userData文件中，没有具体的位置与文件命名规律，文件内容也是未转换格式的，查看起来较为麻烦。Windows系统中的位置如下，

二、输出格式化的日志

1.引入库

安装 electron-log 模块：

npm install electron-log

2. 创建日志文件

通过 app.getPath() 函数，获取系统默认的位置，代码如下（示例）：

// 创建 log.js 文件
// 引入模块
import logger from 'electron-log'
import {app, remote} from 'electron'
 
logger.transports.file.level = 'debug'
logger.transports.file.maxSize = 1002430 // 文件最大不超过 10M
// 日期样式
logger.transports.file.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}]{scope} {text}'
let date = new Date()
date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
// 文件位置及命名方式
// 位置为：C:\Users\hp\AppData\Roaming\Electron\electron_log\
// 文件名为：年-月-日.log 
 logger.transports.file.file = remote.app.getPath('userData') + '\\electron_log\\' + date + '.log'
 // 可以再创建下一级目录
 // 位置为：C:\Users\hp\AppData\Roaming\Electron\electron_log\app\
 // logger.transports.file.file = remote.app.getPath('userData') + '\\electron_log\\app\\' + date + '.log'
// remote.app.getVersion(); // 可返回当前框架的版本号

3. 指定日志文件夹位置

通过 file.resolvePath 指定到想要的输出路径，代码如下（示例）：

// 返回位置为：D:sdp_log\ 
logger.transports.file.resolvePath = () =>  'D:sdp_log\\' + date + '.log'; 

如下：

4. 日志文件放在安装目录下

通过 file.resolvePath 指定到安装路径下，代码如下（示例）：

// 返回路径为：安装路径/exePath/sdp_log/2022-2-17.log
logger.transports.file.resolvePath = () =>  'exePath\\sdp_log\\' + date + '.log';

输出到.exe 文件所在目录下，以 exePath2022-2-17.log 为名
logger.transports.file.resolvePath = () =>  'exePath' + date + '.log'; // 日志文件出现在exe文件所在文件夹下

5. 对日志进行分类

为了快速定位日志，可以对日志进行等级区分，基本分为四类：

export default {
  info (param) {
    logger.info(param)
  },                   
  warn (param) {
    logger.warn(param)
  },
  error (param) {
    logger.error(param)
  },
  debug (param) {
    logger.debug(param) 
  },
}

然后在渲染进程(页面)中调用：

// 引入 log.js 文件
import logger from '../../../util/log'
let loginInfo = this.form;
          if(loginInfo.name === "admin" && loginInfo.password === "111111"){
            alert("登录成功！")
            let ipc = window.require('electron').ipcRenderer;
            ipc.send('login'); 
            this.$router.push('/views/index');
          }else if(loginInfo.name === ""){
            alert("用户名不能为空！");
            logger.error("login failed ---> " + JSON.stringify(loginInfo));

          }else if(loginInfo.password === ""){
            alert("密码不能为空！");
            logger.error("login failed -->"+ JSON.stringify(loginInfo));
          }else{
            alert("用户名或密码错误！")
            logger.error("login failed -->" + JSON.stringify(loginInfo));
          }

日志内容如下：

6. 打开日志文件所在路径

在指定日志文件输出路径后，如何一键查看日志文件，快速定位日志文件所在路径，代码示例如下：

const electron = require("electron")
const {app} = electron
const path = require("path")

// logfile 获取到的是我们指定的安装目录文件夹
let logfile = path.dirname(app.getPath("exe"))
// 系统个托盘右键菜单----打开日志信息
function openLogFile(){
    // const {shell} = require('electron')
    // 日志文件路径
    // 注意路径格式，默认打开到路径中的上一级文件夹 
    // 由于日志文件夹为自定义，我们可以准确的获取到日志文件夹名，与安装路径结合，即可获取到准确的日志文件路径
    shell.showItemInFolder(logfile + "\\exePath\\sdp_log\\2022-2-21.log");
}

效果如下

总结

以上就是所有内容