最近遇到一个奇特的需求，要求构建一个评估系统，分为前后端。它的前端是桌面应用程序，后端也是桌面应用程序。前后端之间的通信是通过前端导出一个数据包文件，然后交给后端导入完成的。由于熟悉Nodejs前后端开发，我选择Electron加Vuejs的解决方案。具体的技术选型如下：

前端：electron+vuejs+indexedDB+localForage，前端程序需要存储数据，但数据量会比较小，通常使用indexedDB就足够了。
后端：electron+vuejs+sqlite3+sequlize，后端程序会汇总前端程序导出的数据包，并做一些统计查询，存储数据量大，读写效率要求高。因此选择sqlite3数据库，可随electron打包到一起安装。

技术简介

Electron简介

Electron（原名为Atom Shell）是GitHub开发的一个开源框架。它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发，著名项目包括GitHub的Atom和微软的Visual Studio Code。

一个基础的Electron包含三个文件：package.json（元数据）、main.js（代码）和index.html（图形用户界面）。框架由Electron可执行文件（Windows中为electron.exe、macOS中为electron.app、Linux中为electron）提供。开发者可以自行添加标志、自定义图标、重命名或编辑Electron可执行文件。

vuejs简介

Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

Vuejs适合开发单页应用程序。

indexedDB数据库简介

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许您存储和检索用键索引的对象；可以存储结构化克隆算法支持的任何对象。您只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务。

indexedDB的API不够友好，建议使用localForage，支持类Storage API语法的客户端数据存储polyfill，支持回退到Storage和Web SQL

项目构建过程

构建Vuejs项目

使用如下命令构建Vuejs项目脚手架：

npm install -g @vue/cli
vue create vue-electron-app
# 可选，添加组件
vue add vuetify
# 使用如下命令查看脚手架效果
npm run serve

构建Electron项目

在上一节创建Vuejs项目的基础上，使用如下命令为Vuejs项目添加Electron支持，从而生成桌面应用程序：

1
2
3

vue add electron-builder
# 查看Electron效果
npm run electron:serve

构建Sqlite3数据库

使用如下命令为项目添加Sqlite3数据库支持：

1 2	npm install sequelize --save --registry https://registry.npm.taobao.org npm install sqlite3 --save --registry https://registry.npm.taobao.org

构建32位安装程序

使用如下命令构建32位Electron安装程序：

1	npm run electron:build -- --ia32

或者

1	yarn electron:build --ia32

问题备注

Electron构建程序下载依赖包失败

请参考 Electron：运行npm run build构建环境失败解决方案。

Electron makensis构建失败

当遇到如下错误时, 解决方法很简单,打包项目路径不能包含中文路径。

1	.electron-builder\Cache\nsis\nsis-3.0.3.2\Bin\makensis.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE

Electron Vuejs显示空白页

请参考Blank screen on builds, but works fine on serve。

支持平台

electron支持macOS、Windows、Linux。在Windows平台，electron仅支持 Windows 7 或更高版本, 旧版操作系统已不再支持(并且无法运行).

参考链接

Create an Electron application with Vue and Vuetify,by bromix.
Electron：运行npm run build构建环境失败解决方案,by 请给我一杯冰可乐.
How to build app for Windows 32bit version?,by nklayman.
支持平台,by electronjs.
Electron应用数据库选型暨indexedDB扫盲,by shenlvmeng.
LOCALFORAGE,by localforage.
IndexedDB,by mozilla.
浏览器数据库 IndexedDB 入门教程,by ruanyifeng.
electron集成sqlite3，win10上折腾了2天,by 兴哥.
Electron笔记,by 小羽信息.
Blank screen on builds, but works fine on serve,by Vue CLI Plugin Electron Builder.
Remove menubar from Electron app,by stackoverflow.