Electron踩坑系列——【一】安装部署

【本系列文章基于Electron 9.0.3 版本,开发平台为windows】

1. 安装node 

版本需与Electron兼容,选择12.12.0,32bit版本【兼容32bit和64bit系统】

下载地址:https://nodejs.org/download/release/v12.12.0/

2. npm源设置

因为某些原因,我们可以选择用淘宝源——

npm install cnpm -g --registry=https://registry.npm.taobao.org

3. 切换到项目根目录,安装相关依赖

cnpm install

需要特别注意,Electron需要全局安装:

cnpm install [email protected] -g

4. 安装C++模块编译环境

使用了addons【http://nodejs.cn/api/addons.html】调用本地库

全局安装node-gyp:npm install -g node-gyp

安装运行环境可以有两种选择,个人更倾向第一种——

【选择一】

添加powershell所在的目录到系统环境变量,比如C:\Windows\System32\WindowsPowerShell\v1.0,重启系统生效

用管理员模式打开cmd,执行命令npm install --global --production windows-build-tools安装C++运行环境

【选择二】

如果不使用windows-build-tools的话,也可以单独安装: Visual Studio Build Tools (选择 "Visual C++ build tools" workload) 或者 Visual Studio 2017 Community (选择 "Desktop development with C++" workload)

官方安装指南在:https://github.com/nodejs/node-gyp#installation

5. 编译C++模块

切换到模块目录,使用命令编译生成node文件:

node-gyp configure --target=9.0.3 --arch=ia32 --dist-url=https://atom.io/download/atom-shell

node-gyp build --target=9.0.3 --arch=ia32

这里target指对应的electron版本号,如果这里选择不对,即使编译过了,执行的时候会出现经典的VERSION不一致问题。

6. Electron-builder打包

全局安装electron-builder:cnpm install electron-builder -g

提前下载好依赖包并放到预定目录:

electron-v9.0.3-win32-ia32.zip

    -    下载路径:https://npm.taobao.org/mirrors/electron/9.0.3/

    -     放置目录C:\Users\*****\AppData\Local\electron\Cache;

SHASUMS256.txt【需要重新命名为SHASUMS256.txt-9.0.3】

    -    下载路径:https://npm.taobao.org/mirrors/electron/9.0.3/

    -    放置目录C:\Users\*****\AppData\Local\electron\Cache;

winCodeSign

    -    下载路径:https://github.com/electron-userland/electron-builder-binaries/archive/winCodeSign-2.6.0.zip【注意包中包含了很多内容,只需要压缩包中的winCodeSign文件夹】

    -    放置目录C:\Users\*****\AppData\Local\electron-builder\cache\winCodeSign【没有就创建,文件夹命名为winCodeSign-2.6.0】

nsis

    -     下载路径:https://github.com/electron-userland/electron-builder-binaries/archive/nsis-3.0.3.2.zip【也可以不用下,winCodeSign包中已经包含了nsis,把文件夹拉出来就行】

    -    放置目录C:\Users\*****\AppData\Local\electron-builder\cache\nsis【没有就创建,文件夹命名为nsis-3.0.3.2】

nsis-resources

    -     下载路径:可以不用下,winCodeSign包中已经包含了nsis-resources,把文件夹拉出来就行

    -    放置目录C:\Users\*****\AppData\Local\electron-builder\cache\nsis【没有就创建,文件夹命名为nsis-resources-3.0.3.2】


========================================

electron .

electron-builder

虽然中间过程很曲折,结果很完美~~

你可能感兴趣的:(Electron踩坑系列——【一】安装部署)