示例Electron主進(jìn)程文件：
const { app, BrowserWindow } = require(‘electron’)
const path = require(‘path’)
function createWindow () {
// 創(chuàng)建瀏覽器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, ‘preload.js’)
}
})
// 加載Vue應(yīng)用程序
win.loadFile(‘dist/index.html’)
// 打開(kāi)開(kāi)發(fā)者工具
win.webContents.openDevTools()
}
// 當(dāng)Electron準(zhǔn)備好時(shí)調(diào)用createWindow函數(shù)
app.whenReady().then(() => {
createWindow()
app.on(‘activate’, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
// 當(dāng)所有窗口都關(guān)閉時(shí)退出應(yīng)用程序
app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit()
}
})
“`
該文件使用Electron API創(chuàng)建一個(gè)新的瀏覽器窗口，并在窗口中加載Vue應(yīng)用程序。在這個(gè)例子中，Vue應(yīng)用程序的靜態(tài)文件被打包到了“dist”文件夾中，所以可以使用“win.loadFile(‘dist/index.html’)”來(lái)加載Vue應(yīng)用程序。
步驟3：創(chuàng)建Electron渲染進(jìn)程
接下來(lái)，需要?jiǎng)?chuàng)建一個(gè)Electron渲染進(jìn)程文件，該文件將為Vue應(yīng)用程序提供一個(gè)Node.js運(yùn)行環(huán)境。可以在Vue項(xiàng)目的根目錄中創(chuàng)建一個(gè)新文件夾，例如“electron”，然后在該文件夾中創(chuàng)建一個(gè)名為“preload.js”的新文件。以下是一個(gè)示例Electron渲染進(jìn)程文件：
“`
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將一個(gè)新的對(duì)象“electron”注入到Vue應(yīng)用程序的全局作用域中。這個(gè)對(duì)象包含兩個(gè)方法“send”和“receive”，可以用來(lái)發(fā)送和接收Electron主進(jìn)程和Vue應(yīng)用程序之間的消息。
步驟4：修改Vue應(yīng)用程序
最后，需要修改Vue應(yīng)用程序的代碼，以便它可以與Electron主進(jìn)程和渲染進(jìn)程進(jìn)行通信。可以在Vue應(yīng)用程序的入口文件中添加以下代碼：
“`
if (window.electron) {
window.electron.receive(‘message’, (data) => {
console.log(data)
})
window.electron.send(‘message’, ‘Hello from Vue!’)
}
“`
這個(gè)代碼片段使用“window.electron”對(duì)象來(lái)接收來(lái)自Electron主進(jìn)程的消息，并向Electron主進(jìn)程發(fā)送消息。
步驟5：打包應(yīng)用程序
一旦完成了上述步驟，就可以使用Electron Builder將Vue應(yīng)用程序打包為Windows應(yīng)用程序。可以使用以下命令來(lái)安裝Electron Builder：
“`
npm install electron-builder –save-dev
“`
然后，在Vue項(xiàng)目的根目錄中創(chuàng)建一個(gè)名為“package.json”的新文件，并添加以下內(nèi)容
