示例Electron主進程文件：
const { app, BrowserWindow } = require(‘electron’)
const path = require(‘path’)
function createWindow () {
// 創建瀏覽器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, ‘preload.js’)
}
})
// 加載Vue應用程序
win.loadFile(‘dist/index.html’)
// 打開開發者工具
win.webContents.openDevTools()
}
// 當Electron準備好時調用createWindow函數
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創建一個新的瀏覽器窗口，并在窗口中加載Vue應用程序。在這個例子中，Vue應用程序的靜態文件被打包到了“dist”文件夾中，所以可以使用“win.loadFile(‘dist/index.html’)”來加載Vue應用程序。
步驟3：創建Electron渲染進程
接下來，需要創建一個Electron渲染進程文件，該文件將為Vue應用程序提供一個Node.js運行環境。可以在Vue項目的根目錄中創建一個新文件夾，例如“electron”，然后在該文件夾中創建一個名為“preload.js”的新文件。以下是一個示例Electron渲染進程文件：
“`
const { contextBridge, ipcRenderer } = require(‘electron’)
contextBridge.exposeInMainWorld(‘electron’, {
send: (channel, data) => {
ipcRenderer.send(channel, data)
},
receive: (channel, func) => {
ipcRenderer.on(channel, (event, …args) => func(…args))
}
})
“`
該文件使用Electron API將一個新的對象“electron”注入到Vue應用程序的全局作用域中。這個對象包含兩個方法“send”和“receive”，可以用來發送和接收Electron主進程和Vue應用程序之間的消息。
步驟4：修改Vue應用程序
最后，需要修改Vue應用程序的代碼，以便它可以與Electron主進程和渲染進程進行通信。可以在Vue應用程序的入口文件中添加以下代碼：
“`
if (window.electron) {
window.electron.receive(‘message’, (data) => {
console.log(data)
})
window.electron.send(‘message’, ‘Hello from Vue!’)
}
“`
這個代碼片段使用“window.electron”對象來接收來自Electron主進程的消息，并向Electron主進程發送消息。
步驟5：打包應用程序
一旦完成了上述步驟，就可以使用Electron Builder將Vue應用程序打包為Windows應用程序。可以使用以下命令來安裝Electron Builder：
“`
npm install electron-builder –save-dev
“`
然后，在Vue項目的根目錄中創建一個名為“package.json”的新文件，并添加以下內容
