Angular+electron创建桌面应用

一、angular环境搭建

不做介绍

二、构建electron配置

1. 添加electron依赖

    npm install electron --save-dev

三、将angular和electron整合

1. 创建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打包方式

1. 安装依赖包

     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