electron 之 如何在 vue 中使用 electron api-- preload.js

在使用 vue 开发 electron 桌面应用，难免需要用到 electron 的一些api, preload.js 就充当了这样的角色，通过向 window 暴露 electron 的api,从而使我们能在 vue 中使用 electron 的api。

如何配置呢，主要包括以下三个步骤：

（1）创建一个 preload.js 文件

（2）在主进程中引入该文件

（3）在vue 中进行应用

具体案例如下 （以初始化的 vue-electron 项目为例）：

第一步：在项目中创建一个 preload.js 文件，文件位置任意 （本次将 preload.js 文件放在 src 目录下面）

preload.js 文件内容如下：

// 从 electron 中引入  contextBridge,ipcRenderer
const { contextBridge,ipcRenderer } = require("electron");



/**
* 给window 暴露 contextBridge 和 quitApp 函数，该函数用于发送 quit-app 事件给主进程
* electron --这个名字 可以自行修改，在window 下使用时，取相应的名字即可
*/

contextBridge.exposeInMainWorld("electron", {
  contextBridge,
  quitApp:()=>ipcRenderer.invoke('quit-app')
});

第二步：在主进程文件中引入 preload.js 文件 ，同时添加 ipcMain 的监听函数

整体代码如下(写了注释的地方，就是需要添加的)：

"use strict";

import { app, protocol, BrowserWindow ,ipcMain} from "electron"; //ipcMain 需要引入
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
const isDevelopment = process.env.NODE_ENV !== "production";
const path = require('path') //引入path
console.log('__dirname',__dirname,process.env.ELECTRON_NODE_INTEGRATION)
protocol.registerSchemesAsPrivileged([
  { scheme: "app", privileges: { secure: true, standard: true } },
]);

async function createWindow() {

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      
      nodeIntegration: true,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      //在此引入  preload.js 文件，路径不需要修改，直接照写即可，同时，记得引入一下 path
      preload:path.join(__dirname,'preload.js')  
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
   
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");

    win.loadURL("app://./index.html");
  }
}


app.on("window-all-closed", () => {
 
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {


  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});


app.on("ready", async () => {
  if (isDevelopment && !process.env.IS_TEST) {
  
    try {
     
    } catch (e) {
      console.error("Vue Devtools failed to install:", e.toString());
    }
  }
  createWindow();
});

// 引入  ipcMain，同时添加监听函数，与 preload.js 中的 quitApp 对应
ipcMain.handle('quit-app',()=>{
  app.quit()
})

if (isDevelopment) {
  if (process.platform === "win32") {
    process.on("message", (data) => {
      if (data === "graceful-exit") {
        app.quit();
      }
    });
  } else {
    process.on("SIGTERM", () => {
      app.quit();
    });
  }
}

第三步、修改 vue.config.js 配置文件

添加 electronBuilder配置，该配置使preload.js 能够被打包到 electron 中

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      preload: "src/preload.js", //路径根据你创建 preload.js 位置，做对应修改即可
    },
  },
});

第四步：修改 app.vue 文件

创建一个按钮，编写点击事件，通过点击按钮，退出程序,

<template>
  <div id="app">
    <button @click="quitApp">退出程序</button>
  </div>
</template>
<script>
export default {
  methods: {
    quitApp() {
      const windos = window.electron;
      console.log(windos);
      windos.quitApp();
    },
  },
};

第五步、运行

从图可知，通过 preload.js ，window 可以获取 electron 的api,从而在 vue 中轻松使用。

完结，撒花，睡觉喽~