electron简单应用开发（electron-quick-start + vuecli + 打包）-原创手记-慕课网

1. 简介
electron: 用html开发跨平台的桌面应用
官网 https://www.electronjs.org/
vuecli：常用的前端脚手架工具

2. 启动electron-quick-start
2.1 下载最新版的electron快速启动示例代码，https://github.com/electron/electron-quick-start
图片描述

2.2 用开发工具打开（本人使用的是Visual Studio Code）

//安装工程，速度很慢，建议用cnpm install
//cnpm install安装时有时会报某个版本不存在，需要手动指定一个版本cnpm install electron@8.0.0
npm install

//启动工程
npm start

图片描述

2.3 使用自己的页面
修改main.js

//执行我们自己的一个静态页面
mainWindow.loadFile('html/index.html')

3. VUECLI 工程
3.1 省略vuecli工程的插件
3.2 vuecli工程的打包

//在工程的根目录下新建vue.config.js文件
//文件内容, 用相对路径打包的意思
module.exports = {
    publicPath: './'   
}

//打一个生产的包
npm run build

3.3 把生产的文件夹dist复制到electron目录下

//修改main.js
mainWindow.loadFile('dist/index.html')

//启动electron工程
npm start

图片描述

4. 桌面应用打包
4.1 我们使用electron-packager来打包，参考 https://www.npmjs.com/package/electron-packager

//安装electron-packager
npm install electron-packager

4.2 打包

npm i electron-packager

//执行打包命令
electron-packager ./ demo --overwrite --platform=win32 --asar --out=OutApp --app-version=0.0.1

//上面这条命令会下载一个包，导致打包很慢
//我们可以把包先准备好
//打开 https://github.com/electron/electron/releases/，https://npm.taobao.org/mirrors/electron/
//下载对应package.json里对应的electron版本（如果install用了其他版本，这里要下载对应版本），我们这里下载win版本
//https://github.com/electron/electron/releases/download/v8.0.1/electron-v8.0.1-win32-x64.zip
//把下载的包放到某个目录下C:\D\java\workspace_Electron\ele-os
//重新运行打包命令
electron-packager ./ demo --overwrite --platform=win32 --asar --out=OutApp --app-version=0.0.1 --electron-zip-dir=C:\D\java\workspace_Electron\ele-os
//打开工程根目录下的OutApp, 打开里面的文件夹运行应用

图片描述