nodeIntegration: true,
preload: path.join(__dirname, ‘preload.js’)
}
})
win.loadFile(‘index.html’)
}
app.whenReady().then(() => {
createWindow()
app.on(‘activate’, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit()
}
})
“`
該代碼中,使用了Electron的API創(chuàng)建了一個窗口,并且加載了index.html文件。
六、編寫index.html
在index.html中添加Vue應(yīng)用程序的代碼,可以使用Vue CLI創(chuàng)建的默認模板。需要注意的是,需要將Vue應(yīng)用程序的入口文件從main.js改為app.js。
七、打包Electron應(yīng)用程序
在終端中執(zhí)行以下命令,將Electron應(yīng)用程序打包成可執(zhí)行文件:
“`
npm run electron:build
“`
該命令會使用electron-builder插件將Electron應(yīng)用程序打包成可執(zhí)行文件,支持Windows、macOS和Linux等操作系統(tǒng)。
八、運行Electron應(yīng)用程序
在打包完成后,可以在dist目錄中找到生成的可執(zhí)行文件。在Windows系統(tǒng)中,雙擊該文件即可運行Electron應(yīng)用程序。
總結(jié):
本文介紹了如何使用Electron框架將Vue項目打包成可執(zhí)行文件。使用Electron可以方便地將Web應(yīng)用程序轉(zhuǎn)換為桌面應(yīng)用程序,支持跨平臺部署,是一種非常方便的應(yīng)用程序開發(fā)方式。