前言Electron 本身提供了完善的桌面能力但如果希望在渲染层使用 Vue3 并保持高效的开发体验electron-vite是当前最易用的解决方案。本文整理从零初始化、交互式选项选择、项目结构到最终产出 HAP 的完整流程帮助你快速复制可落地的架构。为什么选择 electron-vite对比项Electron Forge Webpackelectron-vite构建速度中等极快Vite 原生 ESMVue3 支持需手动配置 loader模板内置热更新体验依赖 HMR 插件默认即开TypeScript额外配置模板可直接选择产物拆分需自定脚本electron-vite build自动输出main/preload/renderer环境准备Node.js ≥ 18.17建议 LTS包管理器任选npm / pnpm / yarn全局无需额外依赖只需npm create electron-vitelatest交互式初始化只需选择模板npm create electron-vitelatest my-vue-electron-app交互式选择? Project template: » Vue (使用方向键选择回车确认)VueReactVanilla注意项目名称已在命令中指定不会询问包管理器根据调用命令自动检测npm create → npmpnpm create → pnpm如需使用 pnpm请使用pnpm create electron-vitelatest my-vue-electron-appcd my-vue-electron-app npm install # 或 pnpm install如果使用 pnpm create npm run dev # 或 pnpm dev交互式选项详解提示作用说明Project template决定渲染进程模板Vue快速或Vue TypeScript生产注意只有模板选择会交互式询问项目名称目录 package.json名称已在命令中指定不会询问包管理器配套锁文件与命令根据调用命令自动检测-npm create→ npm-pnpm create→ pnpm-yarn create→ yarn项目结构速览最新模板文件目录my-vue-electron-app/ ├─ electron/ # Electron 主/预加载模块 │ ├─ main.ts # 主进程入口 │ ├─ preload.ts # 预加载脚本入口 │ └─ electron-env.d.ts # 类型声明 ├─ src/ # Vue3Vite渲染层 │ ├─ main.ts │ ├─ App.vue │ ├─ components/ │ ├─ assets/ │ └─ style.css ├─ index.html # 渲染层 HTML 模板 ├─ vite.config.ts # Vite Electron 联合配置 ├─ electron-builder.json5 # 可选electron-builder 打包配置 ├─ package.json └─ tsconfig*.json配置文件要点vite.config.ts通过defineConfig同时配置主进程build.rollupOptions.input electron/main.ts、预加载electron/preload.ts以及渲染层默认 Vite 配置可添加vue()插件、别名、代理等。package.json模板示例{main:dist-electron/main/index.js,scripts:{dev:vite dev,build:vite build electron-builder,preview:vite build electron .}}实际脚本可能略有差异但核心是main字段指向构建后的主进程入口。electron-builder.json5若需要生成安装包可启用仅用于 HAP 集成时可忽略该文件。tsconfig.json/tsconfig.node.json若选择vue-ts模板已启用严格模式可按需补充paths、types等。常用扩展需求操作引入 Vue Routerpnpm add vue-router在renderer/src/main.ts注册全局状态Piniapnpm add pinia同样在renderer入口挂载UI 组件库建议使用支持 Vite 的库如 Element Plus、Naive UI环境变量新建.env,.env.production通过import.meta.env访问如何打包与产物pnpmbuild# 输出:# dist/ ← 渲染层供 WebView/WebEngine 使用# dist-electron/# ├─ main/ ← 主进程 bundle# └─ preload/ ← 预加载 bundledist等价于传统 Electronresources/app中的前端资源。dist-electron/main、dist-electron/preload分别对应主进程与预加载脚本可直接复制到鸿蒙web_engine模块。若借助electron-builder继续打包桌面安装包会在dist/下生成.exe/.dmg等与 HAP 集成无关可忽略。嵌入 OpenHarmony HAP 的建议流程PC 端自测使用pnpm dev/pnpm build确认 Electron 功能正常。复制产物将dist、dist-electron/main、dist-electron/preload内的文件合并至ohos_electron_hap/web_engine/src/main/resources/resfile/resources/app/。保留package.json确保main字段指向复制后的主进程脚本如main/index.js。若启用了 asar需先解包再拷贝。DevEco Studio 构建 HAP在鸿蒙工程中执行Build Hap(s)得到electron-*-signed.hap随后完成签名与安装。调试技巧pnpm dev默认带来主进程 渲染层热更新可在electron/main.ts中设置process.env.ELECTRON_DISABLE_SECURITY_WARNINGS true辅助调试。pnpm build pnpm preview可在 Electron 外壳中加载dist资源复制到 HAP 前先做回归测试。若需精细控制依赖打包方式可在vite.config.ts的build.rollupOptions中指定external、plugins等逻辑与旧版forge.config.js一致。总结最新模板将主/预加载脚本集中在electron/目录渲染层沿用 Vite 默认的src/看似与旧文档不同但职责划分完全一致。pnpm build产出的distdist-electron与传统 Electronresources/app等价可直接复制到web_engine/src/main/resources/resfile/resources/app/。迁移到鸿蒙时确保package.json的main指向正确入口并按 DevEco Studio 流程生成 HAP即可完成 Electron → OpenHarmony 的适配。源码地址https://atomgit.com/Axxx12345678/harmony-count-app欢迎加入开源鸿蒙PC社区https://harmonypc.csdn.net/