vue+electron踩坑吐血整理

1.报错： 'cannot use import statement outside a module'

以上错误来看node不支持ES6的import写法，所以目的是想如何将ES6转换成ES5, 我们只需执行下图的 命令2而非命令1，vue-cli-serve 脚手架会提前编译ES6

1.png

2. Tray配置的托盘图标不显示问题

    let iconPath = path.join(__static, 'images/logo.png');
    appTray = new Tray(iconPath);

问题描述：开发环境图标正常，打包出来的托盘图标不显示
问题分析：说明打包出来的图标未找到路径，因此__static是关键，具体它指向哪个文件夹？

2.png

问题解决:从上图可以看出__static始终指向public文件夹，因此我们可以把图标放在根目录public文件夹下即可

4.png

3. 报错：'Object has been destroyed'

3.png

问题描述：点击任务栏下关闭窗口进行窗口隐藏，尝试了以下两种方式，报错误'Object has been destroyed'

//错误调用
  win.on('closed', () => {
    win.hide();
  });

app.on('window-all-closed', (e) => {
  if (process.platform !== 'darwin') {
    win.hide();
  }
});

问题分析：在closed和window-all-closed事件中，此时窗口已经关闭（win方法已经被销毁）无法再找到win.hide()方法

问题解决：将win.hide()放在close事件当中

win.on("close", (event) => {
    event.preventDefault();//阻止默认关闭事件
    win.hide(); //隐藏窗口
});

win.on("closed", () => {
    win= null;//移除相应窗口的引用对象，避免再次使用它.
});