成型vue3项目引入electron通信

成型vue3项目引入electron通信

1、cnpm i electron --save-dev
安装electron之后，要使用electron里面的ipcRenderer模块，在调用的时候，使用require引入electron会报错，fs.existsSync is not a function或者Uncaught ReferenceError: require is not defined
错误显示是node_modules/electron/index.js文件中引入fs.existsSync语句造成的。

const { ipcRenderer } = require('electron')
1

查资料得知：
渲染进程属于浏览器端，没有集成Node的环境，所以类似 fs 这样的Node的基础包是不可以使用。
因为没有Node环境，所以这种属于node api的require关键词是不可以使用的。

通过使用window.require代替require来引入electron，因为前者不会被webpack编译，在渲染进程require关键字就是表示node模块的系统。

vue端：js

 var renderer = window.require('electron').ipcRenderer
 renderer.send('import-study', "begin to import study")
 
1
2
3

electron端：

ipcMain.on('import-study',(event,message)=>{
   console.log(message)
   dialog.showOpenDialog({
    title:'选择要上传的文件',//对话框的标题
    buttonLabel: '确认', //确定按钮的自定义标签
    properties: [ 'openDirectory', 'multiSelections'], //打开文件的属性，打开文件还是文件夹，隐藏文件,多选文件
   }).then(res=>{
    if(!res.canceled){
      console.log(res.filePaths)
      event.reply('get-file-path',res.filePaths[0])
    }
   }).catch(err=>{
    console.log(err)
   });
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

vue接收electron返回：

 renderer.on('get-file-path', (event: any, arg: string) => {
                   
                   console.log(arg)
                })
1
2
3
4