本文将明确的表达 清楚在使用vue3 vite4框架下和electron集成后，使用ipc通信和主进程 通信 实现读取项目当中某个文本文件的实现方案。由于在网上找了一堆人写的，没有一个能表达 清楚的，全是只言片语，给我折磨够呛，又是综合了一堆人写的东西才找到方案。别用typescript，这个东西就是个非常多余的东西，一定不要在electron和vue整合项目 里面用。

1一些前置条件

实现思路就是主进程读取electron目录下的文件，把内容通过事件发给渲染进程里面的vue页面

1.1项目结构

• 

electron入口是在和src文件夹同级别的electron文件夹，我的项目 需求是要读取项目里面的一个1.txt文件。

涉及到的读文件的方法就是使用node.js提借的fs类库，但是他默认读取的文件都是在磁盘某个路径网上能找到的大多数例子也就是简单写一下，比如传的参数 是d:\xxx文件这样的，由于我不想把1.txt文件放在某个盘下面，又由于主进程可以读取electron文件夹下面的文件，vue是读不到electron文件夹下面的文件，所以用主进程读文件再把结果发到vue页面上。

1.2 什么是主进程

   主进程 就是electron容器,这样理解就行了，不用深研究，涉及一个对象ipcmain

1.3 什么是渲染进程

   就是vue这样的html页面在的进程 就是渲染进程 ，同样不用深研究，涉及到一个对象叫ipcRender,

   主进程 和渲染进程 互相 之间是隔离的。然后vue页面里面现在是拿不到ipcRender这个对象的。

1.4 什么是preload.js

   我从网上每次找这种例子就直接告诉我用preload，有的也不告诉这个东西是啥，也不说这个文件放哪，对于从来没有用过这个东西的人造成非常多的困难。

   preload是electron提供 的一个中间层功能，electron在构造嵌入html窗口的过程中可在preload.js中写一些代码得到node.js提供的fs对象，electron内部的ipcrender对象，同时又能访问html对象里面的window对象，这样就可以把ipcrender对象挂到window对象上，这样就非常神奇 的在嵌入electron的vue页面里面访到ipcrender对象了。

2相关代码

 2.1 webpreferences

这四项都加上，由于nodeIntegration这项非常关键,preload这个选项就是配置preload.js文件在哪个地方，我的项目 preload.js文件和main.js在同级目录，所以截图当中写法就行。其中path是引入的node.js的path变量

const path = require("path")

2.2 主进程通信相关

在electron文件夹中的main.js最上方从electron引入ipcMain主进程 对象

 

添加自定义事件监听

在electron文件夹下main.js 文件末尾添加监听代码，注意是独立的方法块，不包含在任何代码块中，是个单独的javascript代码

ipcMain.on("viewReady",(e, arg)=>{

  console.log("vue页面初始化完成");

  readFileAndSendMessage("1.txt",e)

})

  

但是要在createWindow创建窗体这个方法执行之前，这样做是为了保证在创建窗口之前，主进程 已经添加了一个自定义事件监听，上图中viewReady是这个自定义事件字符串。

vue页面会派发这个事件名

再添加一个读取文件的方法

electron文件夹中的main.js当中引入node.js的fs类
在当前文件末尾添加自定义方法readFileAndSendMessage

const readFileAndSendMessage = (fileName,target)=>{

   

    fs.readFile(path.join(__dirname, fileName), { encoding: "utf-8" }, (err, result) => {

      if (err) {

        console.log(err, "读取文件内容失败");

      } else {

        console.log(result);

       

        target.sender.send("async-message",result)

      }

    });

}

使用的是fs.readFile方法读取文件成功后，target.sender.send("async-message",result)

这行代码向vue页面发送自定义事件把读到的内容发过去

2.3 preload.js代码

 新建 一个js文件起名preload.js放在electron文件夹下

 

window._ipcRenderer = require('electron').ipcRenderer;

只写这一行就够了，目前就是从electron里面得到ipcRender对象，这样这个对象已要赋值给html window对象的一个自定义属性_ipcRenderer了

2.4 vue页面代码

 

Vue3的onBeforeMount回调里面写上preload.js给弄好的对象，添加一个由ipcMain发过来的自定义事件监听

  window._ipcRenderer.on('async-message', (e, arg) => {

    console.log('vue收到文件内容', arg)

    alert(arg)

  })

然后在onMounted回调使用  window._ipcRenderer.send('viewReady',"vue页面初始化完成")

这行代码通知main.js主进程 vue页面已经初始化完了，这样确保主进程 读完文件把内容发给vue后，vue所有html元素已经初始化完成可以进行其他响应式操作了。