[JavaScript知识库]01_Eletron集成Vue

[Electron] 记一次 Vue 集成 Electron

• 具体步骤在转载链接中不加以赘述，在这描述一下楼主遇到的问题及解决方案

• 大致方法为安装创建Vue项目，并在项目中引入Electron
  主要配置文件为：
  新增文件夹目录如下：
  
  main.js:

  const { app, BrowserWindow } = require("electron");
  
  function createWindow() {
    // 创建浏览器窗口
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true,
      },
    });
  
    // 修改为加载 Vue 服务地址
    win.loadURL("http://localhost:8080/");
  
    // 打开开发者工具
    win.webContents.openDevTools();
  }
  
  // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
  // 部分 API 在 ready 事件触发后才能使用。
  app.whenReady().then(createWindow);
  
  //当所有窗口都被关闭后退出
  app.on("window-all-closed", () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== "darwin") {
      app.quit();
    }
  });
  
  app.on("activate", () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
  
  // 您可以把应用程序其他的流程写在在此文件中
  // 代码 也可以拆分成几个文件，然后用 require 导入。
  

  electron-run-dev.js:

  const { exec } = require("child_process");
  
  // 定义进程
  // vue 服务进程
  let dev_vue_process = null;
  // electron 服务进程
  let dev_electron_process = null;
  
  init();
  // 启动服务
  function init() {
    // 启动Vue服务
    if (dev_vue_process == null) {
      // 执行启动 Vue 服务命令
      dev_vue_process = exec("vue-cli-service serve", {});
  
      dev_vue_process.stdout.on("data", (data) => {
        electronLog(data);
        // 当 Vue 执行输出 http 访问连接时判断启动成功
        if (data.indexOf("http") > -1) {
          // 启动 electron
          startElectron();
        }
      });
      dev_vue_process.stderr.on("data", (data) => {
        if (data.indexOf("<s> [webpack.Progress]") < 0) {
          electronLog(data);
        }
      });
    }
  }
  
  // 启动 electron
  function startElectron() {
    if (dev_electron_process == null) {
      // 执行 electron 入口为 package.json 中配置的 main 属性
      dev_electron_process = exec("electron .", {});
      dev_electron_process.stdout.on("data", (data) => {
        console.log(data);
      });
      dev_electron_process.stderr.on("data", (data) => {
        console.log(data);
      });
      dev_electron_process.on("close", () => {
        // 进程关闭时退出
        process.exit();
      });
    }
  }
  
  // 打印日志
  function electronLog(data) {
    let log = "";
    data = data.toString().split(/\r?\n/);
    data.forEach((line) => {
      log += `  ${line}\n`;
    });
    if (/[0-9A-z]+/.test(log)) {
      console.log(
        "┏ Electron -------------------" +
          "\n\n" +
          log +
          "┗ ----------------------------" +
          "\n"
      );
    }
  }
  
  

• 需要在package.json中修改配置信息

• 运行 npm run electron-dev即可成功运行项目