electron-vue开发爬坑指南

electron-vue开发遇到的爬坑过程，遇到了以下几种坑：

 

1:静态资源目录访问不了，想访问放在static目录下的静态资源，使用express指定静态目录访问不到，解决办法：使用electron-vue配置的__static这个全局变量可以访问到：　　

url: __static+'/pdf/pdf/web/viewer.html?file='+__static+'/pdf/2.pdf'

2:访问本地目录读写文件，可以在vue文件内直接使用fs，windows下路径可以按照本地盘符地址写（路径中\的需改为\\）

var fs = require("fs");
fs.writeFile("D:\\test.txt", "HelloWorld", { flag: "a" }, err => {
if (err) {
throw err;
}
// 写入成功后读取测试
fs.readFile("D:\\test.txt", "utf-8", (err, data) => {
if (err) {
throw err;
}
this.mydata = data;
});
});

 

3:渲染进程和主进程通信，需要采用electron-vue的特定方式

//渲染进程
this.$electron.ipcRenderer.send("ping");
this.$electron.ipcRenderer.on("pong", (event, data) => {
      console.log(data);
});

// 主进程
ipcMain.on('ping', (event, data) => {
  event.sender.send('pong', Math.random())
})

 4:使用electron-builder打包的时候，需要把打包的icon配置到build目录下，如果想在窗口左上角显示icon，必须使用png格式的图片做icon，尺寸为256*256，如果icon的目录制定到别的目录下，会各种报错，非常难排查错误原因

"win": {
      "icon": "build/icons/icon.png"
    },