• 技术选型： electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的API，允许使用 Web 前端技术开发跨平台的桌面客户端，这里使用打包工具webpack搭建electron的主进程和渲染进程的脚手架，渲染进程使用vue作为前端框架。
• 示例项目地址：https://github.com/zhangxuelian/electron-vue-frame
  

  文章目录

  • 一、准备环境
  • • 1、安装node
    • 2、安装git（不用git管理代码则不必安装）
  • 二、创建项目
  • 三、安装electron和vue
  • 四、搭建脚手架
  • • 1、项目结构
    • 2、渲染进程（开发环境）
    • • 2.1、安装依赖
      • 2.2、开发web前端项目（渲染进程模块）
      • 2.3、渲染进程打包配置
    • 3、主进程（开发环境）
    • • 3.1、安装依赖
      • 3.2、开发终端业务（主进程模块）
      • 3.3、主进程打包配置
    • 4、执行打包主进程和渲染并在开发环境下运行终端（热重载）
    • 5、构建打包（生产环境）
    • • 5.1、安装依赖
      • 5.2、打包配置
    • 6、相关扩展
  • 五、异常问题处理
  • • 1、打包时，electron-v17.1.0-win32-x64.zip下载失败（网络问题）
    • 2、打包时，winCodeSign-2.6.0.7z下载失败（网络问题）
    • 3、打包时，nsis-3.0.4.1.7z下载失败（网络问题）
    • 4、打包时，nsis-resources-3.4.1.7z下载失败（网络问题）

一、准备环境

1、安装node

下载地址：https://nodejs.org/en/
安装完成后：cmd命令行，输入

node -v
npm -v

即可查看node和npm的当前安装版本，如下：

2、安装git（不用git管理代码则不必安装）

下载地址： https://git-scm.com/
安装成功后：系统右键菜单可看到 Git Bash Here,选择即可打开git命令终端

二、创建项目

// 创建项目文件夹
mkdir electron-vue-frame
// 进入项目目录
cd electron-vue-frame
// 创建git项目
git init
// 创建git的忽略提交规则文件
touch .gitignore
// 初始化一个项目（一直回车或按自己需要设置）
npm init

三、安装electron和vue

// --save-dev(仅开发环境需要，发布后不依赖的模块)，当前安装的electron版本是：9.1.2
npm install electron --save-dev
// --save(生产环境需要依赖的模块)，当前安装的vue版本是：2.6.11
npm install vue --save

四、搭建脚手架

1、项目结构

|-- electron-vue-frame // 项目名
    |-- .gitignore // git忽略规则文件
    |-- package-lock.json
    |-- package.json
    |-- .electron-vue // electron和vue的脚手架目录
    |   |-- dev.runner.js // 开发环境运行脚本
    |   |-- pack.builder.js // 打包脚本
    |   |-- webpack.main.config.js // webpack主进程配置
    |   |-- webpack.renderer.config.js // webpack渲染进程配置
    |-- src // 源码目录
        |-- index.html // 入口文件模板
        |-- main // 主进程目录
        |   |-- index.js // 主进程
        |-- renderer // 渲染进程目录
            |-- App.scss // 样式文件
            |-- App.vue // vue组件
            |-- main.js // 渲染进程入口文件

2、渲染进程（开发环境）

2.1、安装依赖

// 安装webpack（打包工具）及webpack-dev-server（基于webpack的开发服务及HMR热重载）
npm install --save-dev webpack webpack-dev-server

// 安装vue-loader（vue的转译工具）
// 安装vue-template-compiler（vue的template编译工具）
// 安装vue-style-loader（vue的style转译工具）
// 安装css-loader（vue样式的转译工具，注：亲测4.0.0~4.2.0（当前最新）版本无法处理vue样式）
npm install --save-dev vue-loader vue-template-compiler vue-style-loader css-loader@3.6.0

// （若使用sass预处理工具则安装，不用则不必安装）
npm install --save-dev node-sass sass-loader

// 安装url-loader（url-loader将图片转化为base编码，图片过大则自动使用file-loader）
// 安装file-loader（指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存）
npm install --save-dev url-loader file-loader

// 安装html-webpack-plugin（可根据模板生成html文件，并依赖打包后的文件）
npm install --save-dev html-webpack-plugin

2.2、开发web前端项目（渲染进程模块）

• 文件目录：./src/renderer
• demo参考： https://github.com/zhangxuelian/electron-vue-frame/tree/master/src/renderer
• 这里是前端项目源码。

2.3、渲染进程打包配置

• 文件目录：./.electron-vue/webpack.renderer.config.js
• 具体配置：https://github.com/zhangxuelian/electron-vue-frame/blob/master/.electron-vue/webpack.renderer.config.js
• 该配置主要将渲染进程的vue文件进行转译打包，详情可查看demo,有注释说明。

3、主进程（开发环境）

3.1、安装依赖

npm install --save-dev electron

3.2、开发终端业务（主进程模块）

• 文件目录：./src/main
• demo参考：https://github.com/zhangxuelian/electron-vue-frame/tree/master/src/main
• 配置说明：这里是终端业务源码，主要是控制终端的窗口进程。

3.3、主进程打包配置

• 文件目录：.electron-vue/webpack.main.config.js
• 具体配置：https://github.com/zhangxuelian/electron-vue-frame/blob/master/.electron-vue/webpack.main.config.js
• 配置说明：该配置主要将主进程源码进行打包配置，详情可查看demo,有注释说明。

4、执行打包主进程和渲染并在开发环境下运行终端（热重载）

• 文件目录：.electron-vue/dev.runner.js
• 具体配置：https://github.com/zhangxuelian/electron-vue-frame/blob/master/.electron-vue/dev.runner.js
• 配置说明：该配置将主进程和渲染进程进行打包，创建web服务并监听重载，执行启动终端；
• 在package.json里加入执行脚本：node .electron-vue/dev.runner.js，如下所示：
  
• 执行命令，即可在开发环境下运行终端，实时查看前端项目结果：

npm run dev

5、构建打包（生产环境）

5.1、安装依赖

// 安装文件删除工具
npm install --save-dev del
// 安装electron打包工具
npm install --save-dev electron-builder

5.2、打包配置

• 文件目录：.electron-vue/pack.builder.js
• 具体配置：https://github.com/zhangxuelian/electron-vue-frame/blob/master/.electron-vue/pack.builder.js
• 配置说明：该配置将主进程和渲染进程一起打包，electron-builder会根据package.json里的main对象找到webpack输出的文件进行打包（生产环境下，主进程的webpack配置node的__dirname必须为false，否则加载不到对应渲染进程入口文件）；
• 在package.json里加入执行脚本和electron-builder的配置，如下所示：
• 执行命令，即可打包到在build文件夹下：

npm run build

【注：appId是当前程序唯一ID,如果两个程序的ID一样，则这两个程序不能同时安装，后者会自动卸载前一个程序！！！】

6、相关扩展

以上仅为基础框架搭建，相关功能扩展，请查看相关文档：

• electron文档：https://www.electronjs.org/docs
• webpack文档：https://webpack.js.org/guides/
• vue文档：https://cn.vuejs.org/v2/guide/
• electron-builder文档：https://www.electron.build/
• vue-loader文档：https://vue-loader.vuejs.org/
• webpack相关loader：https://www.webpackjs.com/loaders/
• webpack相关plugin：https://www.webpackjs.com/plugins/

五、异常问题处理

1、打包时，electron-v17.1.0-win32-x64.zip下载失败（网络问题）

解决方案：
切换好点的网络，下载：https://github.com/electron/electron/releases/download/v17.1.0/electron-v17.1.0-win32-x64.zip
放到该目录下：C:\Users\user\AppData\Local\electron\Cache（user是当前登录用户）

2、打包时，winCodeSign-2.6.0.7z下载失败（网络问题）

解决方案：
切换好点的网络，下载：https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z
放到该目录下：C:\Users\user\AppData\Local\electron-builder\Cache\winCodeSign，新建winCodeSign-2.6.0文件夹，将该压缩包解压到该文件夹下（user是当前登录用户）

3、打包时，nsis-3.0.4.1.7z下载失败（网络问题）

解决方案：
切换好点的网络，下载：https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z
放到该目录下：C:\Users\user\AppData\Local\electron-builder\Cache\nsis\，新建nsis-3.0.4.1文件夹，将该压缩包解压到该文件夹下（user是当前登录用户）

4、打包时，nsis-resources-3.4.1.7z下载失败（网络问题）

解决方案：
切换好点的网络，下载：https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z
放到该目录下：C:\Users\user\AppData\Local\electron-builder\Cache\nsis\，新建nsis-resources-3.4.1，将该压缩包解压到该文件夹下（user是当前登录用户）