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