electron项目搭建

前言：electron是一个跨平台桌面端应用开发工具。它将整个系统内容分为主进程和渲染进程两个部分(你可以粗略的理解为electron项目开启了两个服务器，一个渲染页面另一个处理electron窗口内容)。这两个"服务器"之间通过JS Bridge进行通信(即：contextBridge),在主进程的preload预加载中可以同时访问到浏览器进程的window对象和主进程的electron api。此时，我们可以经由ipcRerender(electron中从渲染进程（网页）向主进程发送同步和异步消息的api)将electron的api挂载到window对象上，以便在浏览器进程中使用)，然后在主进程中通过ipcMain(处理从渲染器进程（网页）发送的异步和同步消息。从渲染器发送的消息将被发送到该模块。)监听即可达到进程通信的目的。

本文章主要介绍如何基于vite搭建electron项目

首先创建文件夹并cd到此文件夹中初始化

npm init -y

然后安装vite环境

npm i vite -D

安装electron(推荐cnpm安装，npm安装有可能会卡住，或者你自己更换镜像地址也行)

cnpm install --save-dev electron

安装electron打包工具

cnpm install  electron-builder -D

接下来安装你想用的框架及配套内容(本文使用的是vue3)

npm i vue vue-router pinia axios less less-loader -s

安装vue的构建工具

npm i @vitejs/plugin-vue -D

现在我们开始配置文件内容

因为是基于vite搭建的项目，故此需要再根目录新建vite.config.mjs(为啥用mjs稍后会解释)文件

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron  from 'vite-plugin-electron' import renderer from 'vite-plugin-electron-renderer' import { resolve } from 'path'  export default defineConfig({     //项目路径配置     base:'./',     plugins:[        //vue解析插件        vue(),        electron({          //electron项目入口          entry:'./electron/index.js',          vite:{              build:{                //打包目录名                outDir:'dist'              }           }        }),        //渲染进程入口         renderer({          entry:'./src/main.js',          nodeIntegration: true,        })     ],     //允许跨域     server:{       cors:true     },      resolve:{       "alias":{          "@":resolve(__dirname,'./src')       }     } })

package.json文件配置

{   "name": "electron",   "version": "1.0.0",   //"type":"module",   /*  electron项目不推荐"type":"module"故此我们这里就不使用"type":"module"选项，       启动项目时控制台会提醒The CJS build of Vite's Node API is deprecated       vite已弃用cjs进行构建，我们可以修改vite.config.js为vite.config.mjs    */   //入口文件   "main": "electron/index.js",   "scripts": {     //启动项目      "dev": "vite",     //打包成windows应用     /* --config electron-builder.json 指根据electron-builder.json配置文件打包，所以需要在根      目录下新建electron-builder.json文件配置打包信息*/     "build": "vite build && electron-builder build --win --x64 --config electron-                builder.json",     //打包成mac应用(注：打包mac应用需要再mac系统中才能打包)     "build:mac":"vite build && electron-builder build --mac --arm64 --config electron-                builder.json",     //打包成linux应用     "build:linux":"vite build && electron-builder build --linux --armv7l --config                electron-builder.json"   },   "keywords": [     "electron",     "vue",     "pinia"   ],   "description":"vite-electron",   "author": "仙古梦回",   "license": "ISC",   "devDependencies": {     "@vitejs/plugin-vue": "^5.1.0",     "electron": "^31.2.1",     "electron-builder": "^24.13.3",     "less": "^4.2.0",     "less-loader": "^12.2.0",     "vite": "^5.3.4",     "vite-plugin-electron": "^0.28.7",     "vite-plugin-electron-renderer": "^0.14.5"   },   "dependencies": {     "@vitejs/plugin-vue": "^5.1.0",     "pinia": "^2.1.7",     "vue": "^3.4.33",     "vue-router": "^4.4.0"   } } 

electron-builder.json文件配置

{     "productName": "仙古梦回",     "files": ["./electron/index.js", "./dist"],     "extraFiles": ["./videos", "./cvideo"],      "directories": {       "output": "./dist"     }   }

现在我们开始构建主进程文件，在根目录新建electron文件夹并新建index.js

const { app,BrowserWindow,ipcMain } =  require('electron') const path  = require('path')  const createWindow = ()=>{     const win = new BrowserWindow({         width:1100,         height:700,         webPreferences:{           nodeIntegration:true, // 禁用 nodeIntegration           contextIsolation: true, // 启用上下文隔离            preload:path.join(__dirname,'./preload.js')         }     })     //关闭菜单     win.setMenu(null)     /*环境变量process.env.VITE_DEV_SERVER_URL，用于获取当前项目的启动地址。          示例：http://localhost:5173     */     if(process.env.VITE_DEV_SERVER_URL){         win.loadURL(process.env.VITE_DEV_SERVER_URL)     }else{         win.loadFile(path.join(__dirname,'../dist/index.html'))     } }  //监听渲染进程传过来的great事件 ipcMain.on('great',(event,val)=>{   console.log(val) })  app.whenReady().then(() => {     createWindow()     app.on('activate', () => {       if (BrowserWindow.getAllWindows().length === 0) createWindow()     })   })  app.on('window-all-closed', () => {   if (process.platform !== 'darwin') app.quit() })

预加载文件配置

const { contextBridge,ipcRenderer } = require('electron')  //用于安全地将 API 从预加载脚本的隔离上下文公开到网站运行的上下文。该 API 也可以像以前一样从 window.myAPI 上的网站访问。 contextBridge.exposeInMainWorld('electronAPI', {     //暴露到渲染进程window对象中的great事件，通过ipcRenderer.send发送给主进程     great: (val) => ipcRenderer.send('great', val) })

构建渲染进程

在根目录建立src文件夹同时在根目录创建index.html作为展示页面(上文建立主进程index.js文件时有引入这个html文件)

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>仙古梦回</title>     <!--注意这里的type="module"，我们使用vue开发用的是ESmodule，同时允许跨域crossorigin -->     <script type="module" crossorigin src="./src/main.js" ></script> </head> <body>    <div id="app"></div> </body> </html>

在src文件夹下开始构建vue项目(与普通vue项目构建一样)

main.js文件

import { createApp } from "vue";  import App from './App.vue'  const app = createApp(App)   app.mount('#app')

App.vue文件配置

<template>      <div>          <button @click="send">向主进程发送你好</button>      </div> </template>   <script setup>  const send = ()=>{    window.electronAPI.great('你好123' ) }   </script>   <style lang="less" scoped>  </style>

至此，一个基于vite和vue搭建的electron项目就构建完成。

项目代码地址：仙古梦回/electron的搭建