- 首先有自己的 antDesignPro 或 antdesign 项目; 具体查看 antdesignPro官网
- yarn add electron;
- 项目根目录添加 main.js; 这里贴出来吧; 复制走就行;
const {
app,
BrowserWindow
} = require('electron')
const path = require('path');
const pkg = require('./package.json');
const url = require('url');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
contextIsolation: false,
}
})
// package.json 内的配置 -- 这种判断有点傻,打包要配置DEV属性
if (pkg.DEV) {
// 开发时使用
win.loadURL('http://localhost:8001/');
} else {
// 打包
win.loadURL(url.format({
// 这里地址别错了呀
pathname: path.join(__dirname, 'dist/index.html'),
protocol: 'file:',
slashes: true
}))
}
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
-
package.json 添加 ;“main”: “main.js”,
-
最后加上 一句 electron 开发启动命令 “electron”: “electron . --hot”,
-
先运行 yarn start 启动命令
-
运行 yarn electron ~
-
接下来: 打包准备!
-
在 config / config.ts 下 配置
-
同时
main.js
配置, 当打包环境时
win.loadURL(url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: 'file:',
slashes: true
}))
- 安装打包依赖
yarn add electron-packager -g;
- 先
yarn build
成包,再下一步呀 - 最后打包 命令, 自行了解, 很简单
yarn package
即electron-packager . pms --win --out=release --arch=x64 --app-version=1.0.0 --overwrite --ignore=node_modules
打包后 找到release >> 下的exe
文件;