(二) electron 开发环境配置

开发环境启动

为了方便开发，我们需要让vue和electron能同时运行，怎么做呢？ 在根目录下新建build文件夹，增加dev-runner.js文件,我们可以在这个文件中将vue和electron同时启动。

/*
*使用node子进程，启动vue和electron
*/
const { spawn } = require("child_process");
const electron = require("electron");
const path = require("path");
const chalk = require("chalk"); // log着色输出工具
let electronProcess = null;
let vueProcess = null;
// 启动vue项目
function startVue() {
  return new Promise(resolove => {
    vueProcess = spawn("yarn", ["serve"]);
    vueProcess.stdout.on("data", data => {
      let str = data.toString();
      if (str.includes("running")) {
        resolove();
      }
      console.log(chalk.green(str));
    });
    vueProcess.stderr.on("data", data => {
      let str = data.toString();
      console.log(chalk.red(str));
    });

    vueProcess.on("close", () => {
      process.exit();
    });
  });
}
// 启动electron
function startElectron() {
  electronProcess = spawn(
    electron,
    [path.join(__dirname, "../electron/main.js")],
    {
      env: { // 环境变量配置
        NODE_ENV: "development"
      }
    }
  );

  electronProcess.stdout.on("data", data => {
    console.log(chalk.green(data.toString()));
  });
  electronProcess.stderr.on("data", data => {
    console.log(chalk.red(data.toString()));
  });

  electronProcess.on("close", () => {
    // if (!electronRestart)
    process.exit();
  });
}

function init() { // 需要在vue项目启动后再启动electron
  startVue().then(() => {
    startElectron();
  });
}
init();
复制代码

在package.json文件中增加script命令：

 {
    "dev": "node build/dev-runner"
 }
复制代码

然后执行yarn dev命令，即可在启动vue项目后打开app窗口

监听文件变化重新启动

使用vue CLi创建的项目，修改代码后会自动重启，但是修改electron部分的代码，无法自动重启app，改怎么做呢?

这里使用Node.js自带的fs模块就可以实现。 fs有一个watch方法，可以监听文件变化 查看fs.watch文档，

fs.watch(filename[, options][, listener])
复制代码

修改dev-runner.js文件，增加如下代码：

/**
 * 监听electron文件夹下文件变化，重启app
 */
const fs = require("fs");
function watchFile() {
  fs.watch(
    path.join(__dirname, "../electron"),
    {
      recursive: true // 监控子目录
    },
    function(eventType, filename) {
      // 是否是修改重启，修改electronProcess close事件监听，
      // 去掉注释部分，防止文件监听重启事，进程退出
      electronRestart = true; 
      if (electronProcess && electronProcess.pid) {
        // 杀掉electronProcess进程
        process.kill(electronProcess.pid); 
      }
      electronProcess = null;
      // 打印修改事件及文件名称
      console.log(chalk.green(eventType + ":" + filename));
      // 重启app
      startElectron();
      console.log(chalk.green("electron restart"));
      // 使electronProcess 非正常close关闭事件生效
      setTimeout(() => {
        electronRestart = false;
      }, 5000);
    }
  );
}
复制代码

此时修改electron目录下的所有文件，都会使app重新启动。

安装Vue Devtools扩展程序

查看开发工具扩展程序文档

安装electron-devtools-installer包

yarn add -D electron-devtools-installer
复制代码

修改main.js,在createWindow方法中增加如下代码：

const isDev = process.env.NODE_ENV === "development";
if (isDev) {
    let installExtension = require("electron-devtools-installer");
    installExtension
      .default(installExtension.VUEJS_DEVTOOLS)
      .then(() => {})
      .catch(err => {
        console.log("无法安装 `vue-devtools`: \n", err);
      });
  }
复制代码

保存后就可以看到安装的插件了

至此所有相关配置都基本完成了，我们可以开始写相关的功能了。 模板代码

博客地址: alibt.top

更多精彩，请关注我的公众号！