【大前端++】初始技术栈跨平台方案Electron+Vue，MacOS开发环境搭建【十分钟一个Demo】
一图胜千言
大前端项目早期开发阶段，使用Electron+vue是比较优秀性价比方案。立刻就能适配Win、MacOS，Linux等平台。dist可以适配Android、IOS、鸿蒙加载适配移动端。再改改配置也能适配小程序端。
这样的开始几乎就能完成早期的业务验证，所需的开发人员最小可以只有1个后台+1个vue开发即可；选择一个大基数的终端平台，跑起来累加业务含量即可。
这是大前端刚开始的技术结构和业务搞法，投入不大，业务含量可以拉满。
后期规模起来后，再进行精准用户适配即可，当然也可以根据需求加入其他技术栈进行适配。
但如果是超长时间运行，特别是有定制系统和定制硬件的场景下。那就是大前端++项目性质了，后期要对技术栈和场况解决方案进行积累和升级。
下面是最小化Demo工程的构建方案
下面给出 2025 年实测可用的「Electron + Vue」在 Node 16 下的最短闭环步骤，30 min 内可跑起热重载 + 打包，全部引用 2024-2025 年新鲜文档，按顺序复制即可。
1. 前置版本（务必对齐）
| 工具 | 版本号 | 说明 |
|---|---|---|
| Node | 16.20.2 | LTS 最后一个小版本，electron-builder 官方宣称最高支持到 17 |
| Vue CLI | 5.0.x | 脚手架 |
| electron-builder | 24.x | 负责把网页打成 dmg/pkg/zip/exe |
2. 安装 & 创建骨架
# 1) 确认 node -v 输出 v16.20.x
# 2) 全局装 Vue CLI（一次即可）
npm i -g @vue/cli# 3) 创建 Vue3 项目（Router / Vuex 按需要选）
vue create ele-vue16
cd ele-vue16# 4) 添加 electron-builder 插件（会自动注入主进程目录 src/background.js）
vue add electron-builder
# 选版本时直接回车（默认 25.x 兼容 node16）
3. 启动开发服务器（热重载）
npm run electron:serve
第一次会下载 Electron 包约 100 MB，国内建议提前设镜像：
# Linux / macOS 临时变量
export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
export ELECTRON_CUSTOM_DIR={{ version }}
窗口弹出即代表环境 OK；如出现 「Failed to fetch extension」 不影响运行，可在 src/background.js 里注释掉 installExtension(VUEJS3_DEVTOOLS)。
4. 生产打包
npm run electron:build
产出目录：
- macOS →
dist_electron/*.dmg - Win →
dist_electron/*.exe
5. Node 16 专属细节 & 排坑
| 问题 | 解决 |
|---|---|
| OpenSSL 3 报错 | package.json 里加 "scripts": { "electron:serve": "NODE_OPTIONS='--openssl-legacy-provider' vue-cli-service electron:serve" } |
| 网络卡/下载失败 | 用 cnpm 或上面镜像变量；失败时删除 node_modules/electron 重新 cnpm install |
| 白屏 | 检查 background.js 中 win.loadURL 的地址与 Vue 实际端口一致（dev 为 <-URL->） |
6. 目录速览（vue-cli-plugin-electron-builder 生成）
ele-vue16/
├─ src/
│ ├─ main.js # Vue 入口
│ └─ background.js # Electron 主进程
├─ public/
├─ vue.config.js # 可选：修改窗口尺寸、图标、签名等
└─ dist_electron/ # 打包输出
7. 一键升级备忘
当后续想升 Node 18+ 时，务必同步：
electron-builder≥ 25.x- 移除
--openssl-legacy-provider参数
按以上步骤，Node 16 环境 + Electron + Vue3 可稳定开发 + 打包，全程 5 条命令
运行日志如下
> ele-vue16@0.1.0 electron:serve
> vue-cli-service electron:serveINFO Starting development server...DONE Compiled successfully in 1909ms 10:29:16App running at:- Local: http://localhost:8081/ - Network: http://172.20.10.3:8081/Note that the development build is not optimized.To create a production build, run npm run build.⠸ Bundling main process...DONE Compiled successfully in 273ms 10:29:16File Size Gzippeddist_electron/index.js 791.52 KiB 174.38 KiBImages and other types of assets omitted.Build at: 2025-09-18T02:29:16.997Z - Hash: 79d5c01a1630753a5067 - Time: 273msINFO Launching Electron...
我的【大前端++】知识星球已经开通了，有需求咨询大前端++技术栈升级，场况问题解决咨询的欢迎加入，目前不限咨询次数蛤！欢迎大佬加入大前端++知识星球
SmartApi推荐理由
postman在国内使用已经越来越困难：
1、登录问题严重
2、Mock功能服务基本没法使用
3、版本更新功能已很匮乏
4、某些外力因素导致postman以后能否使用风险较大
5、postman会导致电脑卡顿，而且使用的功能越多越慢，尤其是win电脑，太让人郁闷了
出于以上考虑因此笔者自己开发了一款api调试开发工具SmartApi，满足基本日常开发调试api需求
SmartApi
win版本不大于1M；运行消耗性能极低
macos 版本不大于100M；运行消耗性能极低
非常适合开发设备或性能有限的开发环境
SmartApi只为开发服务
官网地址SmartApi
http://www.smartapi.site/
