Electron 桌面应用打包(npm run build)简述(windows + mac)
设置淘宝镜像 下载官方demo 创建自己的桌面应用 确保已经安装vue-cli 创建vue项目 $ vue init webpack electron-demo 安装对应的electron版本 安装snapcraft(mac环境下构建windows应用需要) $ brew install snapc
设置淘宝镜像
// 设置淘宝镜像,不然下载不了electronnpm config set electron_mirror https://cdn.npm.taobao.org/dist/electron/// 解决npm install 慢npm config set registry https://registry.npm.taobao.org/下载官方demo
git clone https://github.com/electron/electron-quick-startcd electron-quick-startcnpm install // 启动应用,正常启动说明没说明问题npm start创建自己的桌面应用
- 确保已经安装vue-cli
创建vue项目
$ vue init webpack electron-demo
安装对应的electron版本
node v12.8版本安装 --> npm i -D electron@latestnode v12.13版本安装 --> npm i -D electron@betanode v12.14版本安装 --> npm i -D electron-nightly安装snapcraft(mac环境下构建windows应用需要)
$ brew install snapcraft
卡在 node install.js
-
如果不设置上面的淘宝镜像会卡很久,一直下载不了,设置后一两分钟即可安装完依赖
-
把electron-quick-start项目中的main.js复制到新建vue的build文件中,并改个名字electron.js
-
修改electron.js桌面端应用的入口
// and load the index.html of the app.mainWindow.loadFile('index.html') 修改为 mainWindow.loadFile('../dist/index.html')- 修改vue打包项目,默认使用的是绝对路径
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', // 默认的路口 // assetsPublicPath: '/', // 修改后的路径 assetsPublicPath: './', ...}修改 package.json
{ "name": "electron-demo", "version": "1.0.0", "description": "A Vue.js project", "author": "wency <javawency@163.com>", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js", // 添加此行代码 "mac": "npm run build && electron build/electron.js" } ...}启动我的桌面应用
$ npm run mac
官方稳定的一句话
- 您应当在 main.js 中创建窗口,并处理程序中可能遇到的所有系统事件。 下面我们将完善上述例子,添加以下功能:打开开发者工具、处理窗口关闭事件、在macOS用户点击dock上图标时重建窗口,添加后,main. js 就像下面这样:
- 所以我最终的electron.js代码如下
const { app, BrowserWindow } = require('electron') // 保持对window对象的全局引用,如果不这么做的话,当JavaScript对象被// 垃圾回收的时候,window对象将会自动的关闭let win function createWindow () { // 创建浏览器窗口。 win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 win.loadFile('../dist/index.html') // 打开开发者工具(按需使用) // win.webContents.openDevTools() // 当 window 被关闭,这个事件会被触发。 win.on('closed', () => { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 与此同时,你应该删除相应的元素。 win = null })} // Electron 会在初始化后并准备// 创建浏览器窗口时,调用这个函数。// 部分 API 在 ready 事件触发后才能使用。app.on('ready', createWindow) // 当全部窗口关闭时退出。app.on('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit() }}) app.on('activate', () => { // 在macOS上,当单击dock图标并且没有其他窗口打开时, // 通常在应用程序中重新创建一个窗口。 if (win === null) { createWindow() }}) // 在这个文件中,你可以续写应用剩下主进程代码。// 也可以拆分成几个文件,然后用 require 导入。浏览器窗口大小设置
// 初始化浏览器窗口默认宽高。win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true }})// -------< 初始化窗口最大化开始 >-------// win = new BrowserWindow({show: false})// win.maximize()// win.show()// -------< 初始化窗口最大化结束 >------- // -------< 初始化全屏窗口开始 >-------// win = new BrowserWindow({fullscreen: true})// -------< 初始化全屏窗口结束 >-------打包
- 安装electron-packager
$ npm install electron-packager --save-dev
生成dmg应用
- 根目录下的package.json配置如下
{ "name": "electron-demo", "version": "1.0.0", "description": "A Vue.js project", "author": "wency <javawency@163.com>", "private": true, "main": "electron.js", "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "electron .", "build": "node build/build.js", "mac": "npm run build && electron build/electron.js", "electron_dev": "electron build/electron.js", "win_build": "electron-packager ./dist/ --arch=x64 --overwrite" } ....}-
第一步先运行 npm run build
-
然后将 electron.js和 根目录下的 package.json拷贝一份到dist目录下
-
将dist目录下的electron.js文件中 的win.loadFile('../dist/index.html')修改为win.loadFile('index.html') 这是指定index.html所在位置
-
最后npm run win_build生成dmg应用,记住要删除dist下多余的文件,否则生成的app占用空间非常大
-
可以参考 https://juejin.im/post/5bc53aade51d453df0447927