Electron 桌面应用打包（npm run build）简述(windows + mac)
设置淘宝镜像
// 设置淘宝镜像，不然下载不了electron
npm 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-start
cd electron-quick-start
cnpm install
// 启动应用，正常启动说明没说明问题
npm start
创建自己的桌面应用
- 确保已经安装vue-cli
创建vue项目
$ vue init webpack electron-demo
安装对应的electron版本
node v12.8版本安装 --> npm i -D electron@latest
node v12.13版本安装 --> npm i -D electron@beta
node 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占用空间非常大
浙公网安备 33010602011771号