使用 Electron + Vue3 开发桌面应用，想要将console.log()输出到控制台的日志同时输出到物理文件中。实现此功能，笔者汪小成选择的技术方案是electron-log。

electron-log简介

electron-log 用于在 Electron 应用程序中记录日志，它提供了一种简单的方法来记录日志并输出到控制台和文件中。

引入步骤

1、在项目中安装electron-log：

$ yarn add electron-log

2、在 Electron 预加载脚本文件（文件名：preload.js）中引入electron-log并初始化：

// 引入 electron-log
const log = require('electron-log')

// 设置日志记录到文件的级别为 debug
log.transports.file.level = 'debug'
// 设置日志文件的最大大小为 5MB
log.transports.file.maxSize = 5 * 1024 * 1024
// 设置日志文件的格式
log.transports.file.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}]{scope} {text}'
// 创建 Date 对象，用于获取当前的日期和时间
let date = new Date()
// 设置日期格式
date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
// 设置日志文件路径
log.transports.file.resolvePath = () => 'log\\iptv-client.' + date + '.log'
// 设置日志级别
log.level = 'info'
// 将全局的 console.log 函数重定向到 log.info 函数，使所有的 console.log 输出被记录到日志中
console.log = log.info

日志文件路径举例说明：

假如程序安装目录为：D:\IPTV\IptvClient，那么日志文件的路径为：D:\IPTV\IptvClient\log\iptv-client.2023-7-13.log。

注意：

我们创建主窗口和子窗口时都使用如下代码加载了预加载文件preload.js：

let mainWindow = new BrowserWindow({
  // ... 其它代码
  webPreferences: {
    // 指定预加载脚本
    preload: path.join(__dirname, 'preload.js'),
  }
})

然后，我们在 Electron 入口文件、预加载文件、Vue文件中使用console.log()记录日志时，日志就会同时输出到控制台和文件中了。