vue + electronの文件读写

作者：空城机

2022 年 5 月 24 日
本文字数：1939 字
阅读完需：约 6 分钟

在使用electron制作桌面应用时，基本都会需要数据的存储。

如果要制作的应用并不复杂，完全可以将数据存储在本地文件当中，然后应用就可以通过这些文件进行数据的读写。

因为electron的主进程是支持 node 的，所以可以通过 fs 文件系统对文件完成读写操作。

正常操作流程

首先先创建一个 vue 项目，可以使用vue cli进行创建

通过yarn serve命令测试是否能否运行成功，界面正常出现即可。

通过yarn add electron -D加入 electron。然后在package.json同级目录下创建一个electron_main.js文件，作为electron的主进程。同时也需要设置一下package.json中的 main，以及添加"start": "electron ."命令。

在loadURL加载页面时，因为调试，可以先选择yarn serve运行起来的页面
另外在webPreferences需要添加nodeIntegration，否则之后渲染进程中使用require会出现问题
运行yarn start能够成功打开应用

ectron_main.js代码：

const electron = require('electron');// 控制应用生命周期的模块。const {app, ipcMain} = electron;// 创建原生浏览器窗口的模块。const {BrowserWindow} = electron;
let mainWindow;function createWindow() {  // 创建浏览器窗口。  mainWindow = new BrowserWindow({    width: 480,     height: 670,    webPreferences: {      nodeIntegration: true,       contextIsolation: false    }  });  // 加载应用的 index.html。  // mainWindow.loadURL(`file://${__dirname}/common/index.html`);  mainWindow.loadURL('http://localhost:9001/');  // 启用开发工具  mainWindow.webContents.openDevTools();}
// Electron 会在初始化后并准备app.on('ready', createWindow);// 当全部窗口关闭时退出。app.on('window-all-closed', () => {  // 否则绝大部分应用及其菜单栏会保持激活。  if (process.platform !== 'darwin') {    app.quit();  }});app.on('activate', () => {  // 绝大部分应用会重新创建一个窗口。  if (mainWindow === null) {    createWindow();  }});

复制代码

在public文件夹下可以创建一个static文件夹，然后创建renderer.js文件，渲染进程的一部分需要调用electron的代码可以放在这里。

此 js 文件要引入public的 index.html 文件当中

const { ipcRenderer } = require('electron');window.ipcRenderer = ipcRenderer;

复制代码

在 window 中可以创建一个 ipcRenderer，用来指向 electron 中的 ipcRenderer。这样可以让之后的 vue 组件中也可以成功调用 ipcRenderer。
因为在组件中直接调用require('electron')找不到 ipcRenderer，会出现index.js?bdb9:8 Uncaught TypeError: fs.existsSync is not a function报错，原因：https://www.jianshu.com/p/d4ca915581d4

创建一个读取文件方法readFs.js，和一个数据test.json

读取方法：

const fs = require('fs')// 读取文件方法function readFile(path){    return new Promise((resolve, reject)=>{        fs.readFile(path, { flag: 'r', encoding:'utf-8' }, (err, data) => {            if (err) { reject('出错啦'); }            resolve(data);        });     })}
module.exports = { readFile }

复制代码

测试数据：

[    {        "name": "张三",        "age": 18,        "sex": "boy"    },    {        "name": "李四",        "age": 47,        "sex": "boy"    }]

复制代码

然后在electron_main中调用看看：

let con = readFile('./src/assets/fs/test.json')con.then(res=>{  console.log(res)})

复制代码

发现在控制台打印时会出现中文乱码：

解决方法：修改package.json中的 start: chcp 65001 && electron .

现在主进程中已经能够成功读取文件的数据了，那么如何将此数据传递给界面（渲染进程）呢，需要使用到 ipcMain 和 ipcRenderer 来进行相互通信。

ipcMain：从主进程到渲染器进程的异步通信，在主进程中
ipcRenderer：从渲染器进程到主进程的异步通信，在渲染进程中，之前已经定义为 window.ipcRenderer 了，地址：https://www.electronjs.org/zh/docs/latest/api/ipc-renderer

electron_main.js:使用event.sender.send可以在 ipcMain 中将数据传递到渲染器进程中。

...
// 监听渲染进程发来的消息ipcMain.on('render-msg', async (event, arg) => {  if (arg == '获取人物信息') {    let con = await readFile('./src/assets/fs/test.json')    event.sender.send('person-list', con)  }})
...

复制代码

这里在 vue 的组件中使用ipcRenderer先向主进程发送一个获取人物信息的请求，