一、拉取 electron 官网 demo，安装依赖，跑起来
git clone https://github.com/electron/electron-quick-start
npm install
npm run start
二、安装打包依赖 electron-packager
npm install electron-packager --save-dev
三、打包 Vue 项目，复制 dist 文件夹到 electron-quick-start 文件夹，和 node_modules 同级
npm run build
四、进入 electron-quick-start 项目，删除项目根目录下的 index.html 文件
五、在 electron-quick-start 项目中找到入口文件 main.js ，修改打包的文件路径为我们的 index.html
- mainWindow.loadFile('index.html')
+ mainWindow.loadFile('./dist/index.html')
六、在 electron-quick-start 项目中，进入 package.json ，在 scripts 中添加 packager 指令
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
}
七、运行命令打包，项目中出现 App-win32-x64 文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件
npm run packager
八（可选）、美化 exe
- 去掉默认边框、默认菜单，添加自定义
// main.js
const { app, BrowserWindow, ipcMain } = require('electron');
var mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
frame: false,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
},
});
mainWindow.loadFile('./dist/index.html');
}
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});
//登录窗口最小化
ipcMain.on('window-min', function () {
mainWindow.minimize();
});
//登录窗口最大化
ipcMain.on('window-max', function () {
if (mainWindow.isMaximized()) {
mainWindow.restore();
} else {
mainWindow.maximize();
}
});
//关闭窗口
ipcMain.on('window-close', function () {
mainWindow.close();
});
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// dist/index.html
--- <style></style>
--- <body></body>
+++ <style>
.toubu {
background-color: #f7f9ff;
-webkit-app-region: drag;
-webkit-user-select: none;
text-align: right;
}
.toubu img {
-webkit-app-region: no-drag;
padding: 5px 10px 0 0;
height: 15px;
cursor: pointer;
}
</style>
+++ <body>
<div class="toubu">
<!-- 三个操作按钮 -->
<img id="min" src="../最小化.png" alt="" />
<img id="max" src="../缩放.png" alt="" />
<img id="close" src="../关闭.png" alt="" />
</div>
<div id="app"></div>
<script>
var ipc = require('electron').ipcRenderer;
document.getElementById('max').addEventListener('click', () => {
ipc.send('window-max');
});
document.getElementById('min').addEventListener('click', () => {
ipc.send('window-min');
});
document.getElementById('close').addEventListener('click', () => {
ipc.send('window-close');
});
</script>
</body>
- 根目录下放入三张图片
- 修改应用图标（待调研）
// package.json
"scripts": {
"start": "electron .",
--- "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
+++ "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite --icon=./dist/favicon.ico"
},
注意事项
如果遇到白屏的情况，大概率是项目配置的地方缺失了一个路径配置
