1、安装electron相关依赖
npm install --save-dev electron @electron-forge/cli electron-builder
2、在项目目录最外层新建一个index.js文件,与package.json文件同级
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
// 创建浏览器窗口
const win = new BrowserWindow({
autoHideMenuBar: true,
})
win.maximize()
win.loadURL('https://www.csdn.net/') // 输入要打包的网址链接
}
// 应用程序加载窗口
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 窗口关闭退出应用程序
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
3、package.json增加
![](https://img-blog.csdnimg.cn/direct/04c6cd8d46114215aa3988a952de394e.png)
4、执行npm run start,成功后会自动启动桌面程序
![](https://img-blog.csdnimg.cn/direct/46e29997d10b4f338c0729695bc6e611.png)
![](https://img-blog.csdnimg.cn/direct/ff21beee8a804b1890817a4ea3858f62.png)
5、执行打包,package.json增加
"build-win": "electron-builder --win"
![](https://img-blog.csdnimg.cn/direct/4a01408cee434dbcb8ce12203e7d1b6e.png)
6、与scripts同级,新增下面代码
"build": {
"productName": "my-win-app",
"directories": {
"output": "output"
},
"win": {
"icon": "./ico/logo.ico",
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}
]
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./ico/logo.ico",
"uninstallerIcon": "./ico/logo.ico",
"installerHeaderIcon": "./ico/logo.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "my-win-app"
}
},
7、打包命令
npm run build-win
8、查看output文件夹下的exe文件,双击即可打开
![](https://img-blog.csdnimg.cn/direct/b5ea757b4b354c5494c9a83b4e92fcc2.png)