一、angular环境搭建
不做介绍
二、构建electron配置
- 添加electron依赖
npm install electron --save-dev
三、将angular和electron整合
- 创建main.js配置文件
我们需要创建一个带有默认配置的main.js文件，来让我们的Electron应用跑起来，在项目根目录，创建main.js文件，并将一下内容放进去（内容可以参照官房文档，我的是修改过的），注意mainWindow.loadFile(‘’dist/index.html) index.html是项目的入口页面
2.修改index.html内容
将index.html中 <base href=”/”> 修改为<base href=”./”>
3.修改package.json文件内容
首先添加了一个叫做main的新属性，来指明Electron的main.js文件
然后添加了一个叫做electron的新npm脚本命令，此命令会执行Angular的构建命令，然后执行Electron的运行命令
electron-aot这个脚本命令，这个命令给Angular构建指令添加了--prod标志，用来构建正式生产环境下的应用，这个指令会增强性能，但是会让加长打包构建的时间。
注意：当你准备上线你的应用时，确保你使用的是electron-aot命令
4.启动
执行npm run electron
四、项目的打包
由于使用electron-package 打包时每次都要下载electron-v8.2.1-win32-x64.zip等应用工文件，会导致下载失败，因此，这里只介绍electron-builder打包方式
- 安装依赖包
npm install electron-builder -g
2. 打包
运行命令electron-builder
注意：需要将"electron": "^8.2.1" 放到devDependencies下
3.问题解决
第一次使用命令打包的时候，需要下载几个文件，由于下载很慢，导致打包失败，所以我们可以提前下载好这些文件，放到指定文件夹下
下载 electron-v8.2.1-win32-x64.zip（根据你的项目下对应版本）
去https://github.com/electron/electron/releases中选择对应版本进行下载，同时将SHASUMS256.txt下载下来，并修改文件名为SHASUMS256.txt-版本号（如SHASUMS256.txt-8.2.1），两个文件放到C:\Users\XJ\AppData\Local\electron\Cache 下，如下图：
下载winCodeSign-2.6.0.7z：
去https://github.com/electron-userland/electron-builder-binaries/releases下载，下载完成之后进行解压，将解之后的文件放到C:\Users\XJ\AppData\Local\electron-builder\Cache\winCodeSign 文件夹下，如下图：
下载nsis-3.0.4.2.7z和nsis-resources-3.4.1.7z：
下载地址为https://github.com/electron-userland/electron-builder-binaries/releases，下载解压之后放到C:\Users\XJ\AppData\Local\electron-builder\Cache\nsis文件夹下，如下图所示
之后在运行npm-builder命令即可
4.打包之后页面空白问题
一般是显示文件无法找到的问题，需要准确确认文件位置
5.页面无法访问跳转，但是不报错的问题
对于这些问题，还有以及页面空白问题，最根本的原因是打包之前没有进行编译
因此，在打包之前一定要先进行编译
6.打包配置
主要简介：
Output:打包之后文件位置
Icon:打包之后可执行文件的图标
ProduceName:执行文件名称
五、electron的使用
关于electron的使用可以参照官方文档和百度进行查看，官方文档的地址为：https://www.electronjs.org/docs