Electron是使用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库.应公司业务需求，开发一款window桌面端应用。第一次接触Electron遇到很多坑，特此记录分享。
使用的工具
- electron-vue作为整个应用的开发框架，结合了vue和Electron
- 常见打包工具有
electron-builer和electron-packager, 本应用使用的是拥有更强大的功能的electron-builder，新上手的同学可以使用electron-packager生成简单的exe程序 - 本地数据库为了方便兼容其他语言，选择了sqlite,而非常见的lowdb，同时为了保证一定的加密效果，最终选择了
@journeyapps/sqlcipher, 相比普通sqlite这个包使用了SQLCiphe加密 - 其他前端开发工具选择vue全家桶
vue-router、vuex、axios和element-ui
Electron 安装失败问题
参考官方文档 1
https://electronjs.org/docs/tutorial/installation#%E6%95%85%E9%9A%9C%E6%8E%92%E6%9F%A5
electron-vue 常见问题
参考文档：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/faqs.html
electron-builder配置
{
"build": {
"productName": "wcdAssistor",
"appId": "727438548@qq.com",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"extraResources": [
"depend/**/*"
],
// 核心打包时的配置
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "static/icons/256x256.png"
},
"win": {
"icon": "static/icons/256x256.png", // window下应用的图标
"legalTrademarks": "58Assistor"
},
"linux": {
"icon": "static/icons"
},
"nsis": {
"oneClick": false, // 是否一键安装，不可更改目录等选项，默认为true
"perMachine": true,
"allowElevation": true, // 是否允许权限提升
"allowToChangeInstallationDirectory": true, // 是否允许更改安装路径
"createDesktopShortcut": true, // 是否创建桌面图标
"runAfterFinish": true, // 安装完成请求运行
"shortcutName": "wcd助手", // 桌面图标名称
"installerIcon": "./static/icons/icon.ico", // 安装包图标
"uninstallerIcon": "./static/icons/icon.ico" //卸载程序图标
},
"publish": [
{
"provider": "generic", // 自定义更新包路径
"url": "http://wucd.top/xw_update/" // 更新包所在地址
}
]
}
}
其他文档：https://github.com/eyasliu/blog/issues/22
首次build失败的问题
找到报错位置为下载失败，需要手动下载文件到~/AppData/Local/electron-builder/cache下相应目录，比如最终我的目录结构为：
# 7z文件为手动下载的文件，然后解压到同级目录，解压后7z文件可以删除，但我没删除
+-- xxx/cache
+-- nsis
+-- nsis-3.0.31
+-- 好多的文件
+-- nsis-resources-3.3.0
+-- 好多的解压后的文件
+-- nsis-3.0.3.1.7z
+-- nsis-resources-3.3.0.7z
+-- winCodeSign
+-- winCodeSign-2.1.0
+-- 解压的文件
+-- winCodeSign-2.1.0.7z
electron-builder 更新模块出错的问题
出现A complete solution to package and build a ready for distribution Electron app with "auto update" support out of the box...的问题
electron-vue 不适用于新版本的electron-builder中的autoUpdate模块，需要手动安装autoUpdate到3.0.0版本，注意要装在devDependices里，否则会出现要求最低版本为4.0.0的错误提示
sqlite使用失败的问题
sqlite安装过程有许多坑，这里使用的是带有一定加密性的@journeyapps/sqlcipher, 它的所需环境和sqlite类似，下面的步骤同样适用于sqlite的使用
- 配置window下编译环境
npm install windows-build-tools -g
- 检测当前使用的electron版本
electron --version
比如我的是2.0.4
- 安装sqlite
cnpm install sqlite3@latest --build-from-source --runtime=electron --target=2.0.4
--dist-url=https://atom.io/download/electron --save
！注意 这里一定使用cnpm, npm运行会失败，即使翻墙后也会失败，所以务必使用cnpm
electron-vue 使用vuex失效的问题
使用electron-vue创建项目并使用vuex, 有可能出现在开发web时正常使用的方法，在这里失效的问题，这可能是使用vuex-electron的缘故。vuex-electron主要用作在多个进程中共享数据，解决方法可任选其一
- 如果没有多个进程的场景，可以去掉
vuex-electron的使用，单独使用vuex, 或者在store/index.js中去掉createSharedMutations的使用
import Vue from 'vue'
import Vuex from 'vuex'
// 去掉createSharedMutations的引用
import {createPersistedState/**, createSharedMutations */ } from 'vuex-electron'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
modules,
plugins: [
createPersistedState(),
createSharedMutations() // 注释掉这行行代码
],
strict: process.env.NODE_ENV !== 'production'
})
- 如果确实有多进程的应用场景，需要用到
vuex-electron可以使用以下方法
在源目录/src/main/index.js中开头加上store的引用即import '../renderer/store'
总结
作为首次尝试Electron开发项目，在整个开发过程中遇到的坑远远不止这些，这里不再一一列举。如果大家在开发中遇到相关问题，欢迎一起讨论。
