Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种方式越来越受到开发者的喜爱。
本文一步一步教你如何使用Electron5和vue-cli3,在完全保留vue开发web应用的习惯下,搭建桌面应用。
本文不涉及Electron和vue的开发教程,仅以实现两者结合为目的,如深入学习Electron和vue,请访问官方:
Electron: https://electronjs.org/
vue: https://cn.vuejs.org/
vue-cli: https://cli.vuejs.org/zh/
stylus: http://stylus-lang.com/
※注:本文代码区域每行开头的“+”表示新增,“-”表示删除,“M”表示修改;代码中的“…”表示省略。
目录
1 创建项目
1.1 使用cnpm加速下载
1.2 为什么不使用SimulatedGREG/electron-vue
1.3 安装/升级vue-cli3
1.4 创建vue项目
1.5 自动安装electron
1.6 编译并启动APP
2 配置项目
2.1 配置ESLint代码格式检查工具
2.2 配置vue
3 项目基本设定
3.1 主进程和渲染进程简介
3.2 APP窗口大小
3.3 取消跨域限制
3.4 取消菜单栏
3.5 设置APP窗口图标
3.6 设置APP窗口标题栏名称
4 build最终产品
4.1 设置APP及安装包图标
4.2 设置APP名称
4.3 注册快捷键打开devTools
4.4 打包APP
5 可能出现的错误
1 创建项目
1.1 使用cnpm加速下载
npm有时下载速度很慢,可以安装cnpm,从国内淘宝镜像下载,执行以下命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后npm直接替换成cnpm使用。
1.2 为什么不使用SimulatedGREG/electron-vue
SimulatedGREG/electron-vue已经很久没有更新了,而且其生成的工程结构并不是vue-cli3。所以放弃使用。
1.3 安装/升级vue-cli3
先执行以下命令,确认下本地安装的vue-cli版本:
vue -V
在写本文时,我使用的是4.1.x版本。
如果本地使用的是vue-cli2.x或者更早版本,可先卸载:
cnpm uninstall vue-cli -g
※注:vue-cli3使用了新的npm包名,与旧版本不一样。
如果还没有安装vue-cli3,先执行以下命令安装:
cnpm install @vue/cli -g
如果你已安装vue-cli3,但不是最新版本,可执行以下命令升级:
(我这里使用cnpm并没有完成升级,所以使用了npm)
npm update @vue/cli -g
1.4 创建vue项目
找个喜欢的目录,执行以下命令,创建vue项目:
(这里把项目名称定为electron-vue-demo)
vue create electron-vue-demo
会出现以下选项(如果熟悉此步骤可跳过本节内容):
Vue CLI v4.1.4
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
> Manually select features
选择“Manually select features” (自定义安装)。
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
这里选择了常用的模块,请根据实际需求进行选择。
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n) n
如果选择了router,这里会询问是否使用history模式。
vue-router 默认使用hash模式(即通过url#hash来跳转页面),使用URL的hash来模拟一个完整的 URL,当URL改变时,页面不会重新加载。 如果使用history,URL就像正常的url,例如 http://yoursite.com/user/id ,比较好看。但是还需要后台配置支持。
这里我们选择“n”。
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): (Use arrow keys)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
❯ Stylus
选择CSS预处理模块,这里我们使用“Stylus”。
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier
选择ESLint代码格式检查工具的配置,选择“ESLint + Standard config”,标准配置。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
◯ Lint and fix on commit
Line on save表示在保存代码的时候,进行格式检查。
Lint and fix on commit表示在git commit的时候自动纠正格式。
这里只选择“Lint on save”。
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
In dedicated config files
❯ In package.json
这里问把 babel, postcss, eslint 这些配置文件放哪?
In dedicated config files 表示独立文件
In package.json 表示放在package.json里
这里选择“In package.json”。
? Save this as a preset for future projects? (y/N) N
是否为以后的项目保留这些设置?选择“N”。
然后耐心等待项目安装完成。
1.5 自动安装electron
※注:此过程可能需要科学上网,由于直接从国外镜像下载较慢,可能需要等待很漫长的时间。如果你对自己的网速没有超强自信,请跳过本节,前往1.6小节手动安装。
进入到项目根目录,执行:
vue add electron-builder
在安装过程中,很可能会卡在这一步不动了:
node ./download-chromedriver.js
没关系,我们先强制结束掉。再执行一次vue add electron-builder
,然后就可以顺利通过了。
接下来出现配置选项:
? Choose Electron Version (Use arrow keys)
^7.0.0
^8.0.0
❯ ^9.0.0
选择Electron版本。选择 “^8.0.0”。
然后耐心等待安装完成。如果中间出现错误中断了,请重复此步骤。
安装完成后会自动在src目录下生成background.js并修改了package.json。
※注:由于网络原因,如果中间出现过中断失败,再次重新安装可能会很快完成,但实际上electron可能并未安装完全。建议完成以上步骤后,直接删除项目根目录的node_modules/,并且执行cnpm install,从国内镜像重新安装所有依赖包。
1.6 编译并启动APP
执行以下命令,开始编译APP,并启动开发环境APP:
npm run electron:serve
首次启动可能会等待很久,出现以下信息:
INFO Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
...
这是因为在请求安装vuejs devtools插件。需要科学上网才能安装成功。如果不能科学上网也没关系,耐心等待5次请求失败后会自动跳过。
编译成功后,就会出现开发环境的APP了。
2 配置项目
2.1 配置ESLint代码格式检查工具
ESlint可以高效的检查代码格式,让参与项目的所有工程师都能保持统一的代码风格。其检测精度甚至可以精确到是否多一个空格或者少一个空格。代码格式的统一对提高团队的协同开发效率有很大的帮助,特别是对有代码洁癖的工程师。
在项目根目录下创建.eslintrc.js (注意文件名前面有个“.”)
请粘贴以下代码:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 不检测语句末尾的分号
'semi': ['off', 'always'],
// 强制缩进为2个空格
'indent': ['error', 2],
// 关闭函数名称跟括号之间的空格检测
'space-before-function-paren': 0,
// 忽略大括号内的空格
'object-curly-spacing': 0
},
parserOptions: {
parser: 'babel-eslint'
}
}
这里说明下关于indent缩进的配置,要配合项目根目录下的.editorconfig
[*.{js,jsx,ts,tsx,vue}]
indent_style = space <--这里定义缩进类型是空格还是tab
indent_size = 2 <--这里需要与.eslintrc.js的indent对应
trim_trailing_whitespace = true
insert_final_newline = true
.editorconfig 用于IDE自动格式化代码
.eslintrc.js 用于ESlint检测
2.2 配置vue
在项目根目录下创建vue.config.js,粘贴以下代码:
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir);
}
module.exports = {
publicPath: './',
devServer: {
// can be overwritten by process.env.HOST
host: '0.0.0.0',
port: 8080
},
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('src', resolve('src'))
.set('common', resolve('src/common'))
.set('components', resolve('src/components'));
}
};
devServer 用于设置开发环境的服务,这里表示在本地8080端口启动web服务。
chainWebpack 我们给项目目录起了“别名(alias)”,在代码中,我们可以直接用“别名”访问资源,省去了每次输入完整相对路径的麻烦。
※注:
◉ 在js代码中可直接使用别名,例如:
@/common/js/xxx.js 等价于 src/common/js/xxx.js
common/js/xxx.js 等价于 src/common/js/xxx.js
◉ 在css或者html中使用别名,需要在别名前加“~”,例如:
@import "~common/stylus/font.styl";
3 项目基本设定
3.1 主进程和渲染进程简介
在开始下面的步骤之前,很有必要简单了解下Electron的应用架构。
主进程
Electron 运行 package.json 的 main 脚本(background.js)的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。
渲染进程
由于 Electron 使用了 Chromium 来展示 web 页面,所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。
在普通的浏览器中,web页面通常在一个沙盒环境中运行,不被允许去接触原生的资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。
主进程与渲染进程的关系
主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。
主进程管理所有的web页面和它们对应的渲染进程。 每个渲染进程都是独立的,它只关心它所运行的 web 页面。
3.2 APP窗口大小
修改background.js:
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
M width: 1200,
M height: 620,
webPreferences: {
nodeIntegration: true
}
})
3.3 取消跨域限制
修改background.js:
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 1200,
height: 620,
webPreferences: {
+ webSecurity: false,
nodeIntegration: true
}
})
3.4 取消菜单栏
在我们生成的桌面APP中,我们可以看到默认的菜单栏。
在windows中,菜单栏在APP窗口内的顶部;在macOS中,菜单栏位于电脑屏幕顶部。
为了方便项目将来也能直接生成纯web应用,尽量把APP的全部功能都做到渲染进程里,这里我们取消菜单栏。
由于macOS的特殊性,顶部菜单栏无法删除,所以我们针对macOS特殊处理,把菜单栏只保留“关于”和“退出”。
修改background.js:
M import { app, protocol, BrowserWindow, Menu } from 'electron'
...
function createWindow () {
...
win.on('closed', () => {
win = null
})
+ createMenu()
}
+ // 设置菜单栏
+ function createMenu() {
+ // darwin表示macOS,针对macOS的设置
+ if (process.platform === 'darwin') {
+ const template = [
+ {
+ label: 'App Demo',
+ submenu: [
+ {
+ role: 'about'
+ },
+ {
+ role: 'quit'
+ }]
+ }]
+ let menu = Menu.buildFromTemplate(template)
+ Menu.setApplicationMenu(menu)
+ } else {
+ // windows及linux系统
+ Menu.setApplicationMenu(null)
+ }
+ }
3.5 设置APP窗口图标
准备windows和macOS两版图标。
windows: app.ico 最小尺寸:256x256 macOS: app.png或app.icns 最小尺寸:512x512
(后续4.1章节用到)把图标文件放到public/目录下,项目结构如下:
|- /dist_electron
(略)
|- /public
|- app.icns <-- 本教程暂时未使用icns
|- app.ico
|- app.png
|- favicon.ico
|- index.html
|- /src
(略)
|- .editorconfig
|- .eslintrc.js
|- .gitignore
|- babel.config.js
|- package.json
|- package-lock.json
|- README.md
可以顺便把favicon.ico也修改一下,但是在桌面版APP上是用不到的。如果以后生成纯web项目才会用到。
修改background.js
,让APP窗口应用图标:
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 1200,
height: 620,
webPreferences: {
nodeIntegration: true
},
+ // eslint-disable-next-line no-undef
+ icon: `${__static}/app.ico`
})
这里的${__static}
对应的是public目录
现在,Windows系统上可以看到开发环境的APP窗口图标已经生效了。
macOS图标请参照4.1
章节,并且需要在build后才能生效。
3.6 设置APP窗口标题栏名称
修改public/index.html:
我们把electron-vue-demo改为App Demo。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
M <title>App Demo</title>
</head>
4 build最终产品
这里我们已经集成了electron-builder工具,官方文档可以参阅:https://www.electron.build/
4.1 设置APP及安装包图标
在3.5章节,我们的图标生效于运行APP的窗口。本小节将生效于最终生成的可执行文件和安装包图标。需要准备的图标文件请回看3.5章节。
修改vue.config.js
chainWebpack: config => {...},
+ pluginOptions: {
+ electronBuilder: {
+ builderOptions: {
+ win: {
+ icon: './public/app.ico'
+ },
+ mac: {
+ icon: './public/app.png'
+ }
+ }
+ }
+ }
...
4.2 设置APP名称
APP名称包括安装包中APP的名称、可执行文件的文件名。
修改vue.config.js:
pluginOptions: {
electronBuilder: {
builderOptions: {
win: {
icon: './public/app.ico'
},
mac: {
icon: './public/app.png'
},
+ productName: 'AppDemo'
}
}
}
4.3 注册快捷键打开devTools
在Electron中打开devTools是通过主线程中调用win.webContents.openDevTools()实现的。以上教程仅在开发环境初始启动的时候打开devTools,但是一旦关闭就不能再打开了。下面讲一下怎么通过快捷键打开devTools。
修改background.js:
...
M import { app, protocol, BrowserWindow, Menu, globalShortcut } from 'electron'
...
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installVueDevtools()
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
// 在开发环境和生产环境均可通过快捷键打开devTools
+ globalShortcut.register('CommandOrControl+Shift+i', function () {
+ win.webContents.openDevTools()
+ })
createWindow()
})
在windows下,按Ctrl+Shift+i即可打开devTools
在macOS下,按Commond+Shift+i即可打开devTools
为什么没用F12?因为windows系统中,F12是系统保留快捷键,无法使用。官方原话是这么解释的:
The F12 key is reserved for use by the debugger at all times, so it
should not be registered as a hot key. Even when you are not debugging
an application, F12 is reserved in case a kernel-mode debugger or a
just-in-time debugger is resident.
但是可以使用Ctrl+F12,只要不单独使用F12就可以。
以上代码在开发环境和生产环境中均有效,为保证生产环境的安全,建议不要在生产环境中使用。放到上面的if语句中即可。
4.4打包APP
执行以下命令,可以build工程:
npm run electron:build
最终在dist_electron目录下生成build后的产品。
windows版本
目录如下:
dist_electron
|- /bundled
(略)
|- /win-unpacked <-- 绿色版
(略)
|- AppDemo Setup 0.1.0.exe <-- 安装文件
|- AppDemo Setup 0.1.0.exe.blockmap
|- builder-effective-config.yaml
|- index.js
这里其实就win-unpacked和AppDemo Setup 0.1.0.exe有用。
※注:在32位环境下打包生成的是32位APP,在64位环境下打包生成的是64位APP。
mac版本
/dist_electron
|- /bundled
(略)
|- /mac
|- AppDemo <-- 绿色版
|- AppDemo-0.1.0-mac.zip <-- 绿色版压缩包
|- AppDemo-0.1.0-mac.dmg <-- 安装包
|- AppDemo-0.1.0.dmg.blockmap
|- builder-effective-config.yaml
|- index.js
5 可能出现的错误
build失败
我曾经在Win10 64bit 1809版本上build失败,保存信息中提示:
Error output: Can’t open output file Error - aborting creation process
与此同时,在win7和win10 1803版本build正常。经研究,无果。后来把windows升级到1903版本,问题解决了。应该是vue-cli-plugin-electron-builder插件与系统之间的问题导致
初次使用Electron下载慢,Electron-builder打包慢
一共分为下面几步:
1、设置 npm 源为 npm config set registry https://registry.npm.taobao.org/
2、用浏览器,前往 https://npm.taobao.org/mirrors/electron/ 下载你所需要的版本(通常需要下载 mac 和 win 两个,看自己项目需求)
我下载的版本和所需的文件如下(我的项目需要在 Windows 和 Mac 上使用)
注意下载的 SHASUMS文件,记得在最后加上你所使用的版本号,否则会去重新下载
3、将下载的文件拷贝到下列对应的文件夹中:
3.1、 Linux:$XDG_CACHE_HOME 或 ~/.cache/electron/
3.2、 macOS:~/Library/Caches/electron/
3.3、Windows:~/AppData/local/electron/Cache
4、在你的项目中运行 npm install
执行完上述步骤,就能分分钟装好依赖了。
Electron-builder 第一次打包时下载慢的问题
如果你是第一次在你电脑时使用 electron-builder
来打包,你很大可能会卡在下面的几个地方(如有不同,请视情况酌情处理,但是处理的方式都是一样的)
如果你的打包卡在了图中这样,一直在 downloading,那么你可以点击图中的链接,去浏览器下载对应的几个包。
包的版本请根据你的项目需要下载,不知道你的项目需要那个版本的时候,可以在执行打包时,卡住了就去下载。下载后进行如下操作:(以 Mac 为例,其他平台类似)
我打包 Windows 和 macOS 两个平台运行包,一共下载了如下几个文件,
然后,在 ~/Library/Caches/electron-builder
文件夹下面,先新建三个文件夹 nsis
、 wine
和 winCodeSign
。
注意文件名大小写。
然后将前面下载的文件分别解压到对应的文件夹中
注意文件夹名称!
这样就能顺利的进行打包了,不会因为网络问题,一直卡在下载那一步。