Electron-Vite-Vue

![封面_掘金.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06b381431ef84a5990724d3f9db26cc9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1303&h=734&s=183230&e=png&b=deaa50) ![原创声明-掘金.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d495827a01924578b0785a46d63b3f17~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1205&h=155&s=32739&e=png&a=1&b=feb333) Electron是一个基于Chromium和Node.js，可以使用HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容Mac、Windows和 Linux。虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以方便地读写本地文件、发起跨域请求、调用更多系统资源，再加上Web开发低成本、高效率的优势，这种方式越来越受到开发者的喜爱。综合考虑多方面因素，最终选择electron-vite作为本教程的主角。electron-vite现已推出1.x正式版，虽然没有被Electron和Vite官方提到，但经过实战，体验还是不错的。在省去了手动融合Electron和Vite繁琐过程的同时，还实现了V8字节码、主进程和预加载脚本热更新等非常实用的功能，要比自己从头搭建容易得多。本教程将electron-vite开发过程详细讲述，希望能够帮助各位省去摸索的时间，少走弯路，快速完成项目开发。Vue技术栈的小伙伴不要错过哟！本教程也同步推出[《2023金秋版：基于electron-vite构建React桌面客户端》](https://mp.weixin.qq.com/s/kUGPx5Uo2l54RRTCFY1OxA)，欢迎React技术栈的小伙伴来阅读。 ## 先睹为快先看下目录了解本教程都有哪些内容。 ### 章节目录 ``` 1 Electron核心概念 • 1.1 主进程（main） • 1.2 渲染进程（renderer） • 1.3 预加载脚本（preload） 2 初始化项目 • 2.1 使用electron-vite新建项目 • 2.2 精简项目 • 2.3 去掉renderer的src目录 3 Vite基础配置 • 3.1 配置国内镜像源 • 3.2 支持Sass/Scss/Less/Stylus • 3.3 设置路径别名 4 项目架构搭建 • 4.1 项目目录结构设计 • 4.2 关于样式命名规范 • 4.3 设置全局公用样式 5 引入Element Plus • 5.1 安装Element Plus • 5.2 设置Element Plus为中文语言 6 渲染进程页面开发 • 6.1 构建Login页面 • 6.2 构建Home页面 • 6.3 实现页面路由跳转 • 6.4 在Vue组件中实现页面路由跳转 • 6.5 在非Vue组件中实现页面路由跳转 7 主进程与渲染进程通信方法一：send与on/once • 7.1 预加载脚本（preload）开发 • 7.2 主进程开发 • 7.3 继续渲染进程开发 • 7.4 运行效果 • 7.5 关于ipcRenderer.on/once 8 主进程与渲染进程通信方法二：invoke与handle • 8.1 主进程开发 • 8.2 在渲染进程显示Electron版本号 9 常用配置 • 9.1 设置应用图标 • 9.2 设置APP窗口大小 • 9.3 取消跨域限制 • 9.4 设置DevTools快捷键 • 9.5 禁止build环境的DevTools 10 build项目 • 10.1 执行build命令 • 10.2 解决windows版本编译时无法下载的问题 • 10.3 设置build版应用icon • 10.4 其他应用信息配置 • 10.5 解决macOS build版本的Coding Siging错误 • 10.6 build后的目录结构 11 其他说明 • 11.1 源代码保护 • 11.2 敏感字符串保护 • 11.3 主进程热更新 • 11.4 禁止同个Electron程序多开 • 11.5 允许windows用户更改安装目录 • 11.6 批量升级全部项目npm依赖包 12 项目Git源码结束语 ``` ### 本Demo主要依赖包版本 > Node.js 18.18.0 > > electron 26.3.0 > > electron-builder 24.6.4 > > vite 4.4.11 > > vue 3.3.4 > > vue-router 4.2.5 > > element-plus 2.3.14 > > less 4.2.0 > > sass 1.69.0 > > stylus 0.60.0 > ※注： > > 代码区域每行开头的： > > "+" 表示新增 > > "-" 表示删除 > > "M" 表示修改 ## 1 Electron核心概念学习Electron最先要掌握的就是他的主进程与渲染进程概念。网上很多相关教程也进行了详细介绍，又是画关系图又是文字描述的。这里只想把最核心的内容总结一下，以最简单最通俗的方式让各位迅速理解。掌握三个核心概念即可： ### 1.1 主进程（main）每个Electron应用都有一个单一的主进程，作为应用程序的入口点。主进程运行在Node.js 环境，因此可以使用Node.js的所有API能力。主进程并不在浏览器环境中运行，因此不进行页面渲染。 ### 1.2 渲染进程（renderer）渲染进程说白了就是平时的Web页面前端开发。每个Electron应用都会为每个打开的BrowserWindow生成一个单独的渲染器进程。但是渲染进程是无法直接调用Node.js的API的。 ### 1.3 预加载脚本（preload）为了让渲染进程与主进程进行通信从而形成一个整体，预加载脚本的作用就是他们之间的桥梁。预加载脚本与渲染进程共享同一个全局window，因此可以通过window来传递数据。但并不是简单地通过给window添加属性就能使用，以下方式是无法把preload.js共享给渲染进程使用的： ``` // 预加载脚本（preload.js） window.myAPI = { desktop: true } ``` ``` // 渲染进程 console.log(window.myAPI) // => undefined（获取不到） ``` 这是因为Electron的语境隔离（Context Isolation），使得预加载脚本与渲染进程的主要运行环境是隔离的，以避免将任何API都加入到渲染进程的网页中。因此，需要使用contextBridge来安全地实现交互： ``` // 预加载脚本（preload.js） const { contextBridge } = require('electron') contextBridge.exposeInMainWorld('myAPI', { desktop: true }) ``` ``` // 渲染进程 console.log(window.myAPI) // => { desktop: true } (成功获取) ``` 以上方式就是通过```contextBridge.exposeInMainWorld```将preload.js中的myAPI数据共享给渲染进程的网页使用。 > 官网详细介绍： > > https://www.electronjs.org/zh/docs/latest/tutorial/process-model ## 2 初始化项目 ### 2.1 使用electron-vite新建项目找个合适的目录，执行项目创建命令。 npm命令： ``` npm create @quick-start/electron ``` yarn命令： ``` yarn create @quick-start/electron ``` pnpm命令： ``` pnpm create @quick-start/electron ``` 本教程使用yarn，后续不再赘述npm和pnpm的命令。如果没有安装yarn，可执行以下命令全局安装： ``` npm install --global yarn ``` > yarn中文网站： > > https://yarn.bootcss.com/ 执行后，会要求填写项目名称，这里我填写的是electron-vite-vue-app，可根据情况自定。 ``` ? Project name: electron-vite-vue-app ``` 然后，会要求选择框架，选择vue： ``` ? Select a framework: vanilla > vue react svelte solid ``` 最后是几个配置选项： ``` ? Add TypeScript? » No / Yes 是否使用TypeScript？选No，本教程使用JavaScript。如果喜欢TypeScript，请选择Yes。 ? Add Electron updater plugin? » No / Yes 是否添加Electron updater插件？选择Yes。 ? Enable Electron download mirror proxy? » No / Yes 是否开启Electron镜像下载代理。在国内网络环境，强烈建议选择Yes。 ``` 项目创建完成后，执行以下命令： ``` cd electron-vite-vue-app （进入项目目录） yarn（安装依赖包） ``` 安装完成后，执行启动命令： ``` yarn dev ``` 运行效果如下： ![2.1_使用electron-vite新建项目.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cbc77fe2111d45f39ae3858678b1b6b6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=884&h=663&s=60437&e=png&b=2f3241) ### 2.2 精简项目接下来，删除用不到的目录和文件，最简化项目。 ``` ├─ /.vscode ├─ /build ├─ /node_modules ├─ /out ├─ /resources ├─ /src | ├─ /main | ├─ /preload | ├─ /renderer | | ├─ /src - | | | ├─ /assets | | | ├─ /components - | | | | └─ Versions.vue | | | ├─ App.vue | | | └─ main.js | | └─ index.html ├─ .editorconfig ├─ .eslintignore ├─ .eslintrc.cjs ├─ .gitignore ├─ .npmrc ├─ .prettierignore ├─ .prettierrc.yaml ├─ dev-app-update.yml ├─ electron-builder.yml ├─ electron.vite.config.js ├─ package.json ├─ README.md └─ yarn.lock ``` ### 2.3 去掉renderer的src目录以上项目结构有两个src，容易混淆，而且路径表达也略显啰嗦。可以把src/renderer/src目录里的文件放到src/renderer目录中，然后删除src/renderer/src目录。调整后的renderer目录如下： ``` ...（略） | ├─ /renderer | | ├─ /components | | ├─ App.vue | | ├─ index.html | | └─ main.js ...（略） ``` 以上文件删除后，页面会报错。这是因为相应的文件引用已不存在。需要继续修改代码，先让项目正常运行起来。逐个修改以下文件，最终精简代码依次如下： src/renderer/App.vue： ``` ``` src/renderer/index.html： ``` Electron-Vite-Vue

``` 在windows环境中，src/renderer/index.html的``````内容将显示在客户端窗口标题栏中。执行yarn dev，运行效果如下： ![2.3_去掉renderer的src目录.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41c0717e6c084a109102c0f89869529f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=884&h=664&s=10017&e=png&b=ffffff) ## 3 Vite基础配置 ### 3.1 配置国内镜像源 npm和yarn默认是从国外源站拉取依赖包的，为提高下载速度和稳定性，建议配置为国内镜像源。 yarn registry国内镜像： ``` yarn config set registry https://registry.npmmirror.com ``` npm registry国内镜像： ``` npm config set registry https://registry.npmmirror.com ``` yarn node-sass国内镜像： ``` yarn config set SASS_BINARY_SITE https://npmmirror.com/mirrors/node-sass/ ``` npm node-sass国内镜像（仅限于npm < v9的版本）： ``` npm config set SASS_BINARY_SITE https://npmmirror.com/mirrors/node-sass/ ``` yarn Electron国内镜像： ``` yarn config set electron_mirror https://npmmirror.com/mirrors/electron/ ``` npm Electron国内镜像（仅限于npm < v9的版本）： ``` npm config set electron_mirror https://npmmirror.com/mirrors/electron/ ``` > ※注： > 从npm v9 版本开始，npm 命令限制了npm config set只能设置npm官方规定的config (https://docs.npmjs.com/cli/v9/using-npm/config)，因此无法像旧版本一样设置镜像站了，不过依旧可以通过编辑 ~/.npmrc 文件的方式实现旧版本npm config set的效果。如果不清楚本地当前yarn或者npm的配置，可以执行以下命令查看： yarn查看方法： ``` yarn config list ``` npm查看方法： ``` npm config list ``` 如果npm版本在v9及以上的话，需要通过修改项目目录的.npmrc文件来配置镜像源。强烈建议进行以下配置。修改项目根目录的.npmrc： ``` ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ + SASS_BINARY_SITE=https://npmmirror.com/mirrors/node-sass/ ``` 经过以上配置，Electron依赖包下载就会变得很快。 ### 3.2 支持Sass/Scss/Less/Stylus Vite本身提供了对.scss/.sass/.less/.styl/.stylus文件的内置支持。无需再安装特定的Vite插件，但必须安装相应的预处理器依赖。支持Sass/Scss，执行以下命令安装： ``` yarn add -D sass ``` 支持Less，执行以下命令安装： ``` yarn add -D less ``` 支持Stylus，执行以下命令安装： ``` yarn add -D stylus ``` 安装后，就可以直接使用以上对应的CSS预处理语言了，非常方便。 > CSS预处理Vite官方说明： > > https://cn.vitejs.dev/guide/features.html#css-pre-processors ### 3.3 设置路径别名 electron-vite已经预设了路径别名配置。例如：src/renderer/App.vue，可以直接省略成@renderer/App.vue。由于本教程已经删除了src/renderer/src目录，因此需要修改对应的预设配置。修改electron.vite.config.js： ``` ...（略） renderer: { resolve: { alias: { - '@renderer': resolve('src/renderer/src') + '@renderer': resolve('src/renderer') } }, plugins: [vue()] } ...（略） ``` ## 4 项目架构搭建 ### 4.1 项目目录结构设计项目目录结构可根据项目实际灵活制定。这里分享下我常用的结构。重点是renderer目录的结构设计，主要分为公用模块目录、组件模块目录、页面模块目录、路由配置目录等几个部分，让项目结构更加清晰合理。 ``` ├─ /.vscode ├─ /build <-- build编译过程性输出目录 ├─ /dist <-- 最终build的输出目录 ├─ /node_modules ├─ /out <-- dev和build编译过程性输出目录 ├─ /resources <-- 主进程和preload的公共资源目录 ├─ /src | ├─ /main <-- 主进程开发目录 | ├─ /preload <-- preload开发目录 | ├─ /renderer <-- 渲染进程开发目录 | | ├─ /api <-- api目录 | | | └─ index.js <-- api库 | | ├─ /common <-- 全局公用目录 | | | ├─ /fonts <-- 字体文件目录 | | | ├─ /images <-- 图片文件目录 | | | ├─ /js <-- 公用js文件目录 | | | └─ /styles <-- 公用样式文件目录 | | | | ├─ frame.styl <-- 全部公用样式（import本目录其他全部styl） | | | | ├─ reset.styl <-- 清零样式 | | | | └─ global.styl <-- 全局公用样式 | | ├─ /components <-- 公共模块组件目录 | | | ├─ /header <-- 头部导航模块（示例） | | | | └─ header.vue <-- header主文件 | | | └─ ... <-- 其他模块 | | ├─ /views <-- 页面组件目录 | | | ├─ /home <-- home页目录 | | | | └─ home.vue <-- home主文件 | | | ├─ /login <-- login页目录 | | | | └─ login.vue <-- login主文件 | | | └─ ... <-- 其他页面 | | ├─ /router <-- 路由配置目录 | | | └─ index.js <-- 路由配置文件 | | ├─ App.vue <-- 项目页面入口文件 | | ├─ main.js <-- 渲染进程入口文件 | | └─ index.html <-- 渲染进程HTML模板 ├─ .editorconfig <-- IDE配置文件 ├─ .eslintignore <-- 忽略eslint检查的配置文件 ├─ .eslintrc.cjs <-- eslint配置文件 ├─ .gitignore ├─ .npmrc <-- npm镜像源配置文件 ├─ .prettierignore <-- 忽略prettier代码格式化的配置文件 ├─ .prettierrc.yaml <-- prettier代码格式化配置文件 ├─ dev-app-update.yml ├─ electron-builder.yml <-- build配置文件 ├─ electron.vite.config.js <-- electron-vite配置文件 ├─ package.json ├─ README.md └─ yarn.lock ``` 接下来，就按照上面的目录结构开始构建项目。 ### 4.2 关于样式命名规范以我多年来的开发经验来讲，合理的样式命名规范对项目开发有很大的帮助，主要体现在以下方面：（1）避免因样式名重复导致的污染。（2）从命名上可直观区分“组件样式”、“页面样式”（用于给在此页面的组件样式做定制调整）、“全局样式”。（3）快速定位模块，便于查找问题。分享一下本教程的样式命名规范： > G-xx：表示全局样式，用来定义公用样式。 > > P-xx: 表示页面样式，用来设置页面的背景色、尺寸、定制化调整在此页面的组件样式。 > > M-xx: 表示组件样式，专注组件本身样式。后续教程中，可以具体看到以上规范是如何应用的。 ### 4.3 设置全局公用样式我个人比较喜欢Stylus简洁的语法，因此本教程以Stylus作为css预处理语言。各位可以根据自己的习惯，自由选择Sass/Scss、Less、Stylus。新建清零样式文件，src/renderer/common/styles/reset.styl。由于reset.css代码较多，这里不再放出。非常推荐参考这个reset css，代码比较全面，更新也比较及时（截至本文写作时，是2023年9月20日更新的）。 > CSS reset代码详见：https://github.com/elad2412/the-new-css-reset/blob/main/css/reset.css 新建全局样式文件，src/renderer/common/styles/global.styl： ``` html, body, #root height: 100% /*清浮动*/ .clearfix:after content: "." display: block height: 0 clear: both visibility: hidden .clearfix display:block ``` 全局样式将应用于项目的所有页面，可根据需要自行补充或调整。新建全局样式总入口文件，src/renderer/common/styles/frame.styl： ``` @import './reset.styl'; @import './global.styl'; ``` 在frame.styl里引入其他公用样式，就方便一次性全部应用到项目中了。然后在src/renderer/main.js里引入frame.styl： ``` import { createApp } from 'vue' + // 全局样式 + import '@renderer/common/styles/frame.styl' import App from './App.vue' createApp(App).mount('#app') ``` 这样在所有页面里就可以直接使用全局样式了。现在运行项目，可以发现reset、global中的样式已经生效。 ## 5 引入Element Plus Element Plus是一款非常优秀的基于Vue3的UI库，在Vue项目开发中使用非常广泛。 ### 5.1 安装Element Plus 执行： ``` yarn add element-plus ``` 引入Element Plus，修改src/renderer/main.js： ``` import { createApp } from 'vue' // 全局样式 import '@/common/styles/frame.styl' + import ElementPlus from 'element-plus' + import 'element-plus/dist/index.css' import App from './App.vue' - createApp(App).mount('#app') + const app = createApp(App) + app.use(ElementPlus) + app.mount('#app') ``` 然后修改src/renderer/App.vue来验证下Element Plus： ``` <script setup></script> <template> <div class="App"> Electron-Vite-Vue-App + <el-button type="primary">Primary</el-button> </div> </template> <style scoped></style> ``` 执行yarn dev： ![5.1_安装Element Plus.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee0b1636e8874f35b622a400b528c6a9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=884&h=664&s=10776&e=png&b=ffffff) 可以看到Element Plus的el-button组件正常显示出来了。 ### 5.2 设置Element Plus为中文语言 Element Plus默认语言是英文，需进行以下设置调整为中文。修改src/renderer/main.js： ``` import { createApp } from 'vue' // 全局样式 import '@renderer/common/styles/frame.styl' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' + import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import App from './App.vue' const app = createApp(App) - app.use(ElementPlus) + app.use(ElementPlus, { + locale: zhCn + }) app.mount('#app') ``` ## 6 渲染进程页面开发本教程包含Login、Home两个业务页面，使用过Vue Router实现页面跳转。本教程重点讲解Electron，因此不再深入讲解过Vue Router。工程文件变动如下： ❤️❤️❤️------试读结束------❤️❤️❤️ ## 后续精彩章节 ``` 6 渲染进程页面开发 • 6.1 构建Login页面 • 6.2 构建Home页面 • 6.3 实现页面路由跳转 • 6.4 在Vue组件中实现页面路由跳转 • 6.5 在非Vue组件中实现页面路由跳转 7 主进程与渲染进程通信方法一：send与on/once • 7.1 预加载脚本（preload）开发 • 7.2 主进程开发 • 7.3 继续渲染进程开发 • 7.4 运行效果 • 7.5 关于ipcRenderer.on/once 8 主进程与渲染进程通信方法二：invoke与handle • 8.1 主进程开发 • 8.2 在渲染进程显示Electron版本号 9 常用配置 • 9.1 设置应用图标 • 9.2 设置APP窗口大小 • 9.3 取消跨域限制 • 9.4 设置DevTools快捷键 • 9.5 禁止build环境的DevTools 10 build项目 • 10.1 执行build命令 • 10.2 解决windows版本编译时无法下载的问题 • 10.3 设置build版应用icon • 10.4 其他应用信息配置 • 10.5 解决macOS build版本的Coding Siging错误 • 10.6 build后的目录结构 11 其他说明 • 11.1 源代码保护 • 11.2 敏感字符串保护 • 11.3 主进程热更新 • 11.4 禁止同个Electron程序多开 • 11.5 允许windows用户更改安装目录 • 11.6 批量升级全部项目npm依赖包 12 项目Git源码结束语 ``` ## 阅读完整版 📖 完整教程可订阅我的公众号【卧梅又闻花】 [《2023金秋版：基于electron-vite构建Vue桌面客户端》](https://mp.weixin.qq.com/s/7EMjVSZAEyz6dmrO5Vs8YA) ## 项目Git源码本项目已上传至Gitee和GitHub，方便各位下载。 > Gitee: > > https://gitee.com/betaq/electron-vite-vue-app-2023autumn > GitHub: > > https://github.com/Yuezi32/electron-vite-vue-app-2023autumn </article></body></html>