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創建了一個窗口,并且加載了index.html文件。
六、編寫index.html
在index.html中添加Vue應用程序的代碼,可以使用Vue CLI創建的默認模板。需要注意的是,需要將Vue應用程序的入口文件從main.js改為app.js。
七、打包Electron應用程序
在終端中執行以下命令,將Electron應用程序打包成可執行文件:
“`
npm run electron:build
“`
該命令會使用electron-builder插件將Electron應用程序打包成可執行文件,支持Windows、macOS和Linux等操作系統。
八、運行Electron應用程序
在打包完成后,可以在dist目錄中找到生成的可執行文件。在Windows系統中,雙擊該文件即可運行Electron應用程序。
總結:
本文介紹了如何使用Electron框架將Vue項目打包成可執行文件。使用Electron可以方便地將Web應用程序轉換為桌面應用程序,支持跨平臺部署,是一種非常方便的應用程序開發方式。