--- highlight: an-old-hope theme: channing-cyan --- **Electron 是基于 Chromium 和 Node.js 实现的**，前端程序员可以使用 JavaScript、HTML 和 CSS 知识快速构建跨平台的桌面应用。不需要本地开发原生的经验就在能在各PC端平台上运行的跨平台应用 windows、 macOS和Linux 笔者最近在学习Electron并且在用它工作，遇到了一些问题积累了一些浅薄的经验，在这里做一下记录，并且准备做一个桌面端的工具，打包运行到windows、 macOS和Linux上 # 创建项目使用vue3和vite创建vue的项目然后引入electron ## 先创建vue项目 ```shell npm create vite@latest electron-desktop-tool ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bcf41293744472c949f88184952e490~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=449&h=181&s=9231&e=png&b=000000) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34179066cee8476e9b0147549270cdbd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=516&h=226&s=15534&e=png&b=000000) 进入到项目执行安装和运行命令，可以看到vue项目已经启动起来了 ```js cd electron-desktop-tool npm install npm run dev ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3dca8b53342b49998b6d042f5af3ad5d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1639&h=878&s=70121&e=png&b=ffffff) 项目可以在浏览器中跑起来，说明没毛病，下一步就在项目中引入 electron ![目录结构](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87fba14bba1c4fef95d3ac8ac09b7bb4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1024&h=768&s=83002&e=png&b=1c1c1c) 这是目前的目录结构 ## 安装electron 在安装 electron之前需要先配置一下安装源在根目录下新建一个 `.npmrc`文件 ```js strict-ssl=false registry=https://registry.npmmirror.com/ electron_mirror=https://registry.npmmirror.com/-/binary/electron/ electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/ # ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/ ``` - `strict-ssl=false`：这个设置表示在进行 SSL 连接时不强制验证证书的有效性。这在一些情况下可能会用于避免 SSL 证书验证失败的问题 - `registry=https://registry.npmmirror.com/`：这是指定了 npm 的镜像源，用于下载 npm 包 - `electron_mirror=https://registry.npmmirror.com/-/binary/electron/`：这个配置项指定了 Electron 包的镜像源，用于下载 Electron 框架相关的二进制文件 ### 安装electron相关插件接下来就可以进行安装electron和它相关的插件了 ```js // 进入到项目中安装 electron npm install -D electron ``` 安装`electron-builder` 用于打包可安装exe程序和绿色版免安装exe程序 ```js npm install -D electron-builder ``` 安装`electron-devtools-installer` 用于开发调试electron ```js npm install -D electron-devtools-installer ``` 用vite构建electron应用程序需要一个vite插件 ```js npm install -D vite-plugin-electron ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/217e3089a17e465c85951212fb3f68e5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=807&h=635&s=66783&e=png&b=1a1a1a) ### 创建项目入口——主进程 electron引入成功了，可以开始写electron的相关代码了，新建一个`src-electron` 文件用来写electron的代码，在它下面创建一个 `main.ts`文件用来写主进程代码 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2d0ad3eabb04a0bbac8e7612aba3b43~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=920&h=474&s=61424&e=png&b=1d1d1d) ```js // src-electron/main.js const { app, BrowserWindow } = require('electron') const { join } = require('path') // 屏蔽安全警告 // ectron Security Warning (Insecure Content-Security-Policy) process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true' // 创建浏览器窗口时，调用这个函数。 const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, }) // win.loadURL('http://localhost:3000') // development模式 if(process.env.VITE_DEV_SERVER_URL) { win.loadURL(process.env.VITE_DEV_SERVER_URL) // 开启调试台 win.webContents.openDevTools() }else { win.loadFile(join(__dirname, '../dist/index.html')) } } // Electron 会在初始化后并准备 app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() }) ``` ### 配置插件入口在**vite.config.ts**中配置`vite-plugin-electron` 插件入口 ```js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), electron({ // 主进程入口文件 entry: './src-electron/main.js' }) ], /*开发服务器选项*/ server: { // 端口 port: 3000, } }) ``` ### 配置package.json 在`package.json `把`"type": "module",` 删除掉并且配置main字段 ```js // main字段配置为 electron主进程文件路径 "main": "./src-electron/main.js", ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5007089ed14b4d46be790ca2d9055fc3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=482&h=416&s=30619&e=png&b=1f1f1f) ### electron 启动运行 `npm run dev` 启动项目 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/077fb61cf96d4a069144cfd95f063c83~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=783&h=584&s=47998&e=png&b=fcfbfb) 可以看到弹出一个 electron窗口，这样一个最基本的electron应用就写好了 ### 修改标题和logo **修改标题** electron窗口左上角的标题，首先读取的是 `index.html` 的title标签值 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/73a3b7066783471e8830568711de4126~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=877&h=444&s=58297&e=png&b=1d1d1d) 此时把他注释掉如果在主进程中没有配title属性，就会读取`package.json` 文件里的 name属性 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ad13038ecf842c8a000750996a6c571~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=505&h=192&s=11266&e=png&b=1f1f1f) 在主进程 `new BrowserWindow`时，可以自定义窗口标题 ```js const win = new BrowserWindow({ width: 800, height: 600, title:'董员外' }) ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b9359e05962495eb745332880e3a8b2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=722&h=496&s=60226&e=png&b=1d1d1d) **修改图标** 窗口图标和任务栏图标默认是electron 的logo ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/494305547e52490fb40c20551c6c589e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=516&h=464&s=57472&e=png&b=fefefe) 窗口图标是在 `new BrowserWindow` 初始化窗口实例时配置，和标题是一起的 ```js const { join } = require('path') const win = new BrowserWindow({ width: 800, height: 600, title:'董员外', icon: join(__dirname, '../public/logo.ico'), }) ``` - `join`是引入的path路径方法 - `__dirname`是当前文件的路径，我们的main.js是在 `src-electron`文件夹下，所以找图片是需要返回到上一级目录`../public/logo.ico` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c0b7bff696004db7878830067dc018e9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=683&h=798&s=126125&e=png&b=1c1c1c) # 打包打包插件和用到的包我们在第一步都已经安装了，但是还要配置一些打包的参数 ## 配置 `package.json` 首先配置一下打包的命令,在`"scripts"`里面配置这个打包命令 ```js "electron:build": "vite build && electron-builder" ``` 添加一个 `build`属性对象,里面主要配置打包的信息 ```js "build": { "productName": "ElectronDeskTopTool", "appId": "dyy.dongyuanwai", "copyright": "dyy.dongyuanwai © 2024", "compression": "maximum", "asar": true, "directories": { "output": "release/" // 输出目录 }, "nsis": { "oneClick": false,// 是否一键安装 "allowToChangeInstallationDirectory": true,// 允许修改安装目录 "perMachine": true, "deleteAppDataOnUninstall": true, "createDesktopShortcut": true,// 创建桌面图标 "createStartMenuShortcut": true,// 创建开始菜单图标 "shortcutName": "ElectronDeskTopTool" }, "win": { "icon": "./public/logo.ico",// 安装图标 "artifactName": "${productName}-v${version}-${platform}-setup.${ext}",//安装包名称 "target": [ { "target": "nsis" } ] }, "mac": { "icon": "./public/logo.ico", "artifactName": "${productName}-v${version}-${platform}-setup.${ext}" }, "linux": { "icon": "./public/logo.ico", "artifactName": "${productName}-v${version}-${platform}-setup.${ext}" } }, ``` 配置主线程打包加载文件 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b99872a0c7441df899e83991c0497fc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=847&h=453&s=61853&e=png&b=1e1e1e) 用 `process.env.VITE_DEV_SERVER_URL`来判断是否是开发模式打完包之后就会加载index.html文件这是完整的`package.json`文件内容 ```json { "name": "electron-desktop-tool", "private": true, "version": "0.0.0", "main": "./src-electron/main.js", "scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview", "electron:build": "vite build && electron-builder" }, "build": { "productName": "ElectronDeskTopTool", "appId": "dyy.dongyuanwai", "copyright": "dyy.dongyuanwai © 2024", "compression": "maximum", "asar": true, "directories": { "output": "release/" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true, "perMachine": true, "deleteAppDataOnUninstall": true, "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "ElectronDeskTopTool" }, "win": { "icon": "./public/logo.ico", "artifactName": "${productName}-v${version}-${platform}-setup.${ext}", "target": [ { "target": "nsis" } ] }, "mac": { "icon": "./public/logo.ico", "artifactName": "${productName}-v${version}-${platform}-setup.${ext}" }, "linux": { "icon": "./public/logo.ico", "artifactName": "${productName}-v${version}-${platform}-setup.${ext}" } }, "dependencies": { "vue": "^3.4.21" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.4", "electron": "^30.0.0", "electron-builder": "^24.13.3", "electron-devtools-installer": "^3.2.0", "typescript": "^5.2.2", "vite": "^5.2.0", "vite-plugin-electron": "^0.28.4", "vue-tsc": "^2.0.6" } } ``` ## win打包 ```js npm run electron:build ``` 可以看到打包成功，并且生成了一个指定的打包文件输出目录 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/854c6d6fa32f4dcabc5064d9a5415f1e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1116&h=960&s=142626&e=png&b=1b1b1b) release目录下有安装包 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d40ede59ed14e10be52fba4b085c84f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=491&h=209&s=18155&e=png&b=fefdfd) 设置了`allowToChangeInstallationDirectory`就可以自定义安装目录 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7369a0caa044c0795482f48a95cee72~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=763&h=499&s=42099&e=png&b=f7f7f7) 设置`createDesktopShortcut`安装成功后就可以看到，在桌面上生成了快捷方式 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b4d98f4200e4bed82948eac290a5226~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1078&h=391&s=114007&e=png&b=fefefe) 到这里已经算成功了，接下来大概了解一下build打包配置，可以详细的了解一下打包结果的设置 ## build相关配置 ```js // 打包的配置都放到 build里 "build": { "productName":"ElectronDeskTopTool",//项目名这也是生成的exe文件的前缀名，也可以在每个环境中自行配置 "appId": "com.dyy.dongyuanwai",//应用程序的唯一标识符，通常是反转的域名格式 "copyright":"dyy.dongyuanwai © 2024",//版权信息，显示在应用程序中说明版权归属的地方 "compression": "maximum", //压缩级别，指定打包时使用的压缩级别。这里设置为"maximum"表示最大压缩 "asar": true, // 是否启用 asar 打包，asar 是 Electron 提供的一种文件打包方式，能够提高应用程序的性能和安全性。 "directories": { //指定输出目录，打包完成后的文件会放置在该目录下。 "output": "release" }, // windows相关的配置 "win": { "icon": "xxx/icon.ico", //图标路径 "artifactName": "${productName}-v${version}-${platform}-setup.${ext}" // 安装包名称 }， // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包。 "arch": [ "x64", "ia32" ] } ``` ### nsis配置 NSIS（Nullsoft Scriptable Install System）打包是为了生成 Windows 平台的安装程序。 ```js "nsis": { "oneClick": false, // 是否一键安装 "perMachine": true, //设置为 true 时，将在计算机上所有用户账户中安装应用程序；false 则只会在当前用户账户下安装 "allowElevation": true, // 允许提升权限进行安装，设置为 true 时，安装过程可能会请求管理员权限 "allowToChangeInstallationDirectory": true, // 允许修改安装目录 "installerIcon": "xxx/xxxx.ico",// 安装图标 "uninstallerIcon": "xxx/xxxx.ico",//卸载图标 "installerHeaderIcon": "xxx/xxxx.ico", // 安装时头部图标 "deleteAppDataOnUninstall": true, // 设置为 true 时，卸载应用程序时会删除应用程序的数据文件 "createDesktopShortcut": true, // 创建桌面图标 "createStartMenuShortcut": true,// 创建开始菜单图标 "shortcutName": "xxxx", // 图标名称 }, ``` ## linux 打包 `electron-builder` 打包会自动识别环境，所以我在linux环境也可以直接运行 `npm run electron:build`,他就会打成linux的包 linux环境会打成`.deb`格式，所以要在`package.json` 的linux里面配置 ```js "linux": { "icon": "./public/logo.ico", "artifactName": "${productName}-v${version}-${platform}-setup.${ext}", "target": [ "deb" ] } ``` ### 解决linux打包报错运行打包命令就会发现这样的报错： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec2a4b5931ff44dfa523b24aa9627804~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=849&h=309&s=103575&e=png&b=252525) > ⨯ Please specify project homepage, see https://electron.build/configuration/configuration#Metadata-homepa > >Please specify author 'email' in the application package.json 这是因为`package.json`文件内容 homepage、auth、email这些字段没有配置 # 配置路由虽然是electron客户端里的路由，但是配置还是和vue的路由一样 **1、安装路由：** ```js npm install vue-router@4 ``` 添加路由页面：在src目录下新建一个 `page`文件夹里面存放页面 **2、新建 first页面和second页面** ```js /page/first/index.vue ``` ```js /page/second/index.vue ``` **3、配置路由表** 在src下新建一个router目录，然后在里面添加一个index.ts文件，在里面配置路由 ```js // src\router\index.ts import { createRouter, createWebHashHistory } from 'vue-router' const router = createRouter({ // hash 模式。 history: createWebHashHistory(), routes: [ // 设置首页 { path: '/', component: () => import('../page/first/index.vue') }, { path: '/second', component: () => import('../page/second/index.vue') }, ], }) export default router ``` 文件目录结构如下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0fe50bf4dfdc4b3f987208c641376f40~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=854&h=585&s=53864&e=png&b=1d1d1d) **4、src下的main.ts中use路由** ```js import { createApp } from 'vue' import './style.css' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') ``` **5、在`App.vue`文件删除原来的内容，添加` router-view`** ```js ``` 启动运行 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/334847d5aa48479ab866d465b3a50116~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=440&h=440&s=195250&e=png&b=fefefe) 看看最后的效果 ![recording.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6ef1ba95cd44fbe902d1bbd82dc4f68~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=784&h=589&s=61390&e=gif&f=55&b=fefefe) # 最后后续还会继续更新~ ipc进程通信，linux、macOS打包等等所有代码都会更新到github: [electron-desktop-tool](https://github.com/dongyuanwai/electron-desktop-tool)

这是 first 页面

这是 second 页面