序

之前在《vue 番茄钟 &electron 打包》 一文当中，只是具体介绍过简单番茄钟的流程，但是对于其中遇到的一些问题没有细说，所以本次就来总结一下问题。

electron 和 vue 的问题

1. 输出文件夹改名 vue cli 创建的项目，使用yarn build打包出来的文件默认是dist文件夹，而electron-builder打包的默认文件夹名称也是dist。

本次项目，我不使用vue add electron-builder来添加进打包的，所以需要先打包 vue，然后再使用 electron 打包。所以electron-builder的配置需要改变，打包输出文件名称修改，在package.json中 build 添加directories:

"directories": {    "output": "electron_dist"}

2. vue 中使用 vue-router 会导致electron-builder打包后，ipcMain和ipcRenderer之间的通信不成功。网上似乎也是修改配置，我这里直接将路由移除，变成了动态组件。

3. 在electron主程序中，使用 node 读取和存储文件，fs 的地址使用相对位置，在调试程序时可以成功，但是打包后，会出现错误，打印后发现是找不到存储文件，这里需要使用path模块，将__dirname和相对地址路径加起来。path.join(__dirname, '相对路径')
   

4. 延时函数时间会在弹窗最小化后出现错位。因为我制作的番茄钟，所以对于任务需要进行倒计时操作，但是发现将项目窗口最小化后，时间一久，任务的倒计时会与真正时间产生误差。 这是因为electron的窗口如果被隐藏，那么就不然让浏览器窗口占用过多 cpu 资源，将这个窗口的循环线程的循环时间延长。所以浏览器中setInterval这类 api 会变慢。

解决的方式：将 setInterval 替换成 node 中的延时函数

const {setTimeout,setInterval,clearTimeout,clearInterval} = require('timers');

虽然后续继续优化项目时可能还会遇到更多问题，但目前就是这些