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

 

posted @ 2019-02-25 15:13  axl234  阅读(...)  评论(...编辑  收藏