Electron_Vue项目打包后启动其他exe程序的方法

背景：

        最近使用Electron打包Vue项目，想要将一个前后端的项目搞成exe安装程序。

        由于我的后台是python写的，可以使用pyinstall打包成exe。于是我就在想能不能在前端项目打包好后，在启动前端项目exe程序之前，先启动后台对应的exe以启动后台接口，把后台服务打开，这样桌面程序也就有了前后端支持从而实现功能了。

        这时需要再桌面程序窗口函数执行前先执行这个后台exe文件以启动接口。

问题：

        但是我发现单纯在electron的主进程js文件中设置执行exe的路径只会在打包前生效，当使用build打包之后，后台exe就不见了。也就启动不了后台exe接口文件了。

解决：

        翻阅到一篇大佬的文章之后，发现通过配置，可以实现我们最终想要的功能。之所以打包之后exe无法启动，是因为exe文件也被打包了，因此打包后的程序找不到后台对应的exe文件，所以导致接口无效。

思路：

        在package.json或者vue.config.js  (vue-cli搭建的项目)中配置一下extraResources。这个配置项可以将我们的后台接口exe，在打包后放到指定的路径下。

        由于我的项目是vue-cli搭建的，我就直接在vue.config.js中配置了。如下图。

        这里，我的from路径是将labelme.exe放到了项目根目录（与package.json同级的目录）下。

 to路径为打包后项目文件夹的resources文件夹下，使用路径‘./’就是默认放到resources文件夹下。

 "extraResources":[
          {
            "from": "./labelme.exe",
            "to": "./labelme.exe",
           
          },

       这样，配置完成之后，我们需要在主进程js文件中，配置下打包后执行的后台exe程序的路径即可。

        process.cwd() 返回的是一个字符串，表示当前 Node.js 进程所在的目录的路径。也就是我们打包后项目的路径，然后匹配到resources中的exe程序即可。

        exec()是通过路径启动对应的exe。

import { exec } from 'child_process'
import path from 'path'
const pathToExecutable = path.join(process.cwd(), '/resources/labelme.exe');
exec(pathToExecutable, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error executing the executable: ${error}`);
      return;
    }
    console.log(`Executable output: ${stdout}`);
  });

将上述代码可以封装成一个函数，在创建主窗口之前调用，就可以实现桌面程序在启动之前优先启动后台接口exe了。这里我封装成了runLabelMeExe函数。

         如下图，在createWindow创建主窗体函数之前，调用后台接口，即可。

这样配置后，打包出来的程序，可以直接启动后台接口实现前后端对接。

        关闭后台服务还在研究中，目前是之间任务管理器关的。