Vue+Electron桌面程序

来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

Electron

Electron官网

Electron内置了Chromium（谷歌浏览器）和Node.js

其中Chromium是渲染进程，主要渲染和解析HTML；Node.js作为主进程，管道用IPC通信

Vite构建Electron项目

需要安装两个依赖：

npm install electron -D
npm install vite-plugin-electron -D

配置vite.config.ts：

import electron from "vite-plugin-electron"

export default defineConfig({
  plugins: [electron({
    entry: "electron/index.js"
  })],
})

配置package.json：

{
  // 删掉"type": "module",
  "main": "dist-electron/index.js",
}

编写electron/index.js

// app：应用程序   BrowserWindow：控制打开electron窗口
import {app,BrowserWindow} from "electron"

// 创建窗口
const createWindow = ()=> {
  const win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,  // 是否和node集成
      contextIsolation: false,  // 是否上下文隔离
    }
  })
  console.log(process.env)

  // 加载服务（使用vite服务地址的环境变量）
  win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)
}

// 初始化，创建窗口
app.whenReady().then(createWindow)

执行npm run dev，程序启动了。

Electron项目打包

安装依赖：

npm install electron-builder -D
// 能够使用环境变量
npm install cross-env

修改electron/index.js：

// app：应用程序   BrowserWindow：控制打开electron窗口
import {app,BrowserWindow} from "electron"
import path from "path"

// 创建窗口
const createWindow = ()=> {
  const win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,  // 是否和node集成
      contextIsolation: false,  // 是否上下文隔离
    }
  })

  // electron app.isPackaged api有bug，无法准确识别是否处于生产环境
  // 使用自定义的环境变量区分开发环境和生产环境
  // if(app.isPackaged) {
  if(process.env.NODE_ENV != "development") {
    // 如果是打包文件，加载index.html
    win.loadFile(path.join(__dirname,"../index.html"))
  } else {
    // 如果是开发环境，加载服务（使用vite服务地址的环境变量）
    win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)
  }
}


// 初始化，创建窗口
app.whenReady().then(createWindow)

package.json中添加打包配置：

{
  "scripts": {
    // electron app.isPackaged api有bug，无法准确识别是否处于生产环境
    // 所以可以自定义一个环境变量来区分开发环境和生产环境
    // chcp 65001：开发环境调试时防止中文乱码
    // cross-env NODE_ENV=development：环境变量赋值为development
    "dev": "chcp 65001 && cross-env NODE_ENV=development vite",
    "build": "vue-tsc && vite build && electron-builder",
    "preview": "vite preview"
  },
  // 其他省略......
  "build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": true,
    "copyright": "Copyright © 2022 electron",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist",
      "dist-electron"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具体内容"
    }
  }
}

nsis的配置项：

{"oneClick": false, // 创建一键安装程序还是辅助安装程序（默认是一键安装）
    "allowElevation": true, // 是否允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序 （仅作用于辅助安装程序）
    "allowToChangeInstallationDirectory": true, // 是否允许修改安装目录 （仅作用于辅助安装程序）
    "installerIcon": "public/timg.ico",// 安装程序图标的路径
    "uninstallerIcon": "public/timg.ico",// 卸载程序图标的路径
    "installerHeader": "public/timg.ico", // 安装时头部图片路径（仅作用于辅助安装程序）
    "installerHeaderIcon": "public/timg.ico", // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）
    "installerSidebar": "public/installerSiddebar.bmp", // 安装完毕界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）
    "uninstallerSidebar": "public/uninstallerSiddebar.bmp", // 开始卸载界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）
    "uninstallDisplayName": "${productName}${version}", // 控制面板中的卸载程序显示名称
    "createDesktopShortcut": true, // 是否创建桌面快捷方式
    "createStartMenuShortcut": true,// 是否创建开始菜单快捷方式
    "shortcutName": "SHom", // 用于快捷方式的名称，默认为应用程序名称
    "include": "script/installer.nsi",  // NSIS包含定制安装程序脚本的路径，安装过程中自行调用  (可用于写入注册表 开机自启动等操作)
    "script": "script/installer.nsi",  // 用于自定义安装程序的NSIS脚本的路径
    "deleteAppDataOnUninstall": false, // 是否在卸载时删除应用程序数据（仅作用于一键安装程序）
    "runAfterFinish": true,  // 完成后是否运行已安装的应用程序（对于辅助安装程序，应删除相应的复选框）
    "menuCategory": false, // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为true，则使用公司名称
}

Electron debug工具Debugtron

进程间通信

进程间通信其实就是一种发布-订阅模式。

安装依赖：

pnpm add vite-plugin-electron-renderer

修改vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import electron from "vite-plugin-electron"
import electronRender from "vite-plugin-electron-renderer"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),electron({
    entry: "electron/index.js"
  }),electronRenderer()],
})

App.vue：

<template>
  <button @click="send">发送信息</button>
</template>

<script setup lang="ts">
import {ipcRenderer} from "electron"

const send = ()=> {
  // 渲染进程给主进程发送消息
  // 参数1：自定义事件名称   其他参数：携带的信息
  ipcRenderer.send("message",114514)
}

// 主进程使用ipcRenderer侦听来自渲染进程的事件
ipcRenderer.on("load",(_,message)=> {
  console.log(message, "牛逼")
})
</script>

electron/index.js：

// app：应用程序   BrowserWindow：控制打开electron窗口
import {app,BrowserWindow,ipcMain} from "electron"
import path from "path"

// 创建窗口
const createWindow = ()=> {
  const win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,  // 是否和node集成
      contextIsolation: false,  // 是否上下文隔离
    }
  })

  console.log(process.env)

  // if(app.isPackaged) {
  if(process.env.NODE_ENV != "development") {
    // 如果是打包文件，加载index.html
    win.loadFile(path.join(__dirname,"../dist/index.html"))
  } else {
    // 如果是开发环境，加载服务（使用vite服务地址的环境变量）
    win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)
  }

  // 打开electron调试工具
  win.webContents.openDevTools()

  // 主进程使用ipcMain侦听来自渲染进程的事件
  // 回调函数 参数1：event   其他参数：传的值
  ipcMain.on("message",(_,msg)=> {
    console.log(msg,"我趣")
  })

  setTimeout(() => {
    // 主进程给渲染进程发送消息
    win.webContents.send("load",{message:1919810})
  }, 3000)
}


// 初始化，创建窗口
app.whenReady().then(createWindow)