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"
},