- 技术选型: electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的API,允许使用 Web 前端技术开发跨平台的桌面客户端,这里使用打包工具webpack搭建electron的主进程和渲染进程的脚手架,渲染进程使用vue作为前端框架。
- 示例项目地址:https://github.com/zhangxuelian/electron-vue-frame
一、准备环境
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是当前登录用户)