前言
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
electron搭建了一个壳，集成了chromium和node环境，业务逻辑只需要按vue写法即可。
方式一
直接使用electron-vue，具体内容见文档，优点是配置齐全，即开即用。缺点是很多配置已经固定，比如eslint，如果跟自己的开发习惯不匹配的话，需要做调整，另外electron的版本比较老。
方式二
vue-cli + electron，目前是我采用的方式。
搭建vue项目
此处不多做介绍，直接看文档，我使用的是vite+vue3，有需要的可以去看文档
安装electron
npm i -D electron
配置electron入口
新建electron文件夹
image.png
代码结构如图
// main.js
const { app, BrowserWindow } = require('electron');
const getMenuPersonal = require('./menu');
const getWindow = require('./window');
app.whenReady().then(() => {
let win = new getWindow().createWindow(); //创建窗口
new getMenuPersonal(win).createMenu(); //创建工具栏
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) new getWindow().createWindow();
});
// window.js
const windowStateKeeper = require('electron-window-state');
const path = require('path');
const { Menu, BrowserWindow, Tray, app } = require('electron');
const { join } = require('path');
process.env.DIST = join(__dirname, '../../');
const indexHtml = join(process.env.DIST, 'dist/index.html');
/**
* 创建窗口对象*/
class Window {
win = null;
getWindowState() {
// 配置electron-window-state插件,获取窗口option
let win;
const mainWindowState = windowStateKeeper({
defaultWidth: 1000,
defaultHeight: 800
});
let { width, height } = mainWindowState;
const options = {
width,
height,
devTools: true,
show: false,
// icon: path.resolve(__dirname, '../log.ico'),
webPreferences: {
// nodeIntegration:true, //集成node api
// contextIsolation:false //关闭上下文隔离，配合nodeIntegration，可以赋予在render进程中写node代码的能力
preload: path.resolve(__dirname, '../preload/preload.js') //预加载的js文件
// webSecurity: false, // 同源策略
}
};
win = new BrowserWindow(options);
mainWindowState.manage(win);
return win;
}
createContextMenu(contents) {
// 创建右键菜单
let contextMenu = Menu.buildFromTemplate([{ label: 'Item 1' }, { role: 'editMenu' }]);
contents.on('context-menu', (e, params) => {
contextMenu.popup();
});
}
createTray() {
// 创建托盘
let trayMenu = Menu.buildFromTemplate([{ label: 'Item 1' }, { role: 'quit' }]);
let tray = new Tray(path.resolve(__dirname, '../trayTemplate.png'));
tray.setToolTip('Tray details');
tray.on('click', e => {
console.log(e);
if (e.shiftKey) {
app.quit();
} else {
this.win.isVisible() ? this.win.hide() : this.win.show();
}
});
tray.setContextMenu(trayMenu);
}
async createWindow() {
this.win = this.getWindowState();
this.createTray();
if (app.isPackaged) {
this.win.loadFile(indexHtml);
// this.win.loadURL(' https://www.baidu.com/');
} else {
this.win.loadURL('http://localhost:3004');
}
//等待dom渲染后打开窗口
this.win.on('ready-to-show', () => {
this.win.show();
});
this.win.on('closed', () => {
this.win = null;
});
let contents = this.win.webContents;
contents.openDevTools();
// 开启vue-devtools
// await session.defaultSession.loadExtension(path.join(__dirname, '../../node_modules/vue-devtools/vender'));
this.createContextMenu(contents);
this.createTray();
return this.win;
}
}
module.exports = Window;
创建窗口需要添加依赖 electron-window-state
npm i electron-window-state
修改配置package.json
- 由于electron使用node模块，需要修改
"type": "commonjs" - 配置electron入口
"main": "electron/main/main.js" - 添加启动script
"start": "electron --inspect=3004 ."
启动
先启动vue项目
npm run dev
然后启动electron
npm run start
到此，基础配置已经完成。
问题
- 安装electron的过程当中，有可能会出现下载失败，这种情况写可以配置npm源地址，具体内容见文档
- 生成托盘的图片加载失败
Failed to load image from path �xxx，此种情况是图片格式不对，可以去iconfont里去下载，尺寸选16即可image.png - 使用vue-devtools，由于较新版本的electron中
BrowserWindow.addDevToolsExtension接口已经废弃，因此网上有些回答BrowserWindow.addDevToolsExtension(xxx)会报错TypeError: electron.BrowserWindow.addDevToolsExtension is not a function，官网有提供替换接口session.loadExtension(path)，可以将vue-devtools下载到本地引入。
我这里使用了@vue/devtools
// 安装
npm i -D @vue/devtools
// 使用
./node_modules/.bin/vue-devtools
