1.安裝electron,通過(guò)npm下載electron 需要全局安裝
npm i -s electron -D2.在和src同級(jí)的目錄中新建一個(gè)electron文件夾，在文件夾中新建main.js
3.修改package.json文件
?1.刪掉type這個(gè)字段，不然會(huì)報(bào)錯(cuò)
?2.然后加上"main": "electron/main.js",
?3.在scripts字段中加入啟動(dòng)electron的命令：如下圖
4.在剛才創(chuàng)建的electronx文件夾下main.js中加入以下代碼
// 控制應(yīng)用生命周期和創(chuàng)建原生瀏覽器窗口的模組
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true // 關(guān)閉控制臺(tái)的警告
function createWindow() {
// 創(chuàng)建瀏覽器窗口
const mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
// 書(shū)寫(xiě)渲染進(jìn)程中的配置
nodeIntegration: true, //開(kāi)啟true這一步很重要,目的是為了vue文件中可以引入node和electron相關(guān)的API
contextIsolation: false, // 可以使用require方法
enableRemoteModule: true, // 可以使用remote方法
},
})
// 監(jiān)聽(tīng)html
mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html'))
}
// 這段程序?qū)?huì)在 Electron 結(jié)束初始化
// 和創(chuàng)建瀏覽器窗口的時(shí)候調(diào)用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 通常在 macOS 上，當(dāng)點(diǎn)擊 dock 中的應(yīng)用程序圖標(biāo)時(shí)，如果沒(méi)有其他
// 打開(kāi)的窗口，那么程序會(huì)重新創(chuàng)建一個(gè)窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，當(dāng)所有窗口都被關(guān)閉的時(shí)候退出程序。 因此，通常對(duì)程序和它們?cè)?// 任務(wù)欄上的圖標(biāo)來(lái)說(shuō)，應(yīng)當(dāng)保持活躍狀態(tài)，直到用戶(hù)使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
5.這時(shí)候你去打開(kāi)控制臺(tái)輸入輸入npm run start會(huì)得到一片空白，展示如下頁(yè)面
1.因?yàn)楝F(xiàn)在監(jiān)聽(tīng)的是vue打包后的dist文件夾中的index.html
2.我就不教你們?cè)趺创蜷_(kāi)那個(gè)了，沒(méi)必要，我們直接開(kāi)始配置熱更新不香嗎
?5.配置加載代碼熱更新
1.下載electron-reload模塊
npm i electron-reload2. 在electron的配置文件中加入下列代碼
// 配置熱更新
let env = 'pro'
if (env == 'pro') {
const elePath = path.join(__dirname, '../node_modules/electron')
require('electron-reload')('../', {
electron: require(elePath),
})
// 熱更新監(jiān)聽(tīng)窗口
mainWindow.loadURL('http://localhost:8888')
// 打開(kāi)開(kāi)發(fā)工具
mainWindow.webContents.openDevTools()
} else {
// 生產(chǎn)環(huán)境中要加載文件，打包的版本
// Menu.setApplicationMenu(null)
// 加載 index.html
mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增
}全部的main.js代碼可直接復(fù)制使用
// 控制應(yīng)用生命周期和創(chuàng)建原生瀏覽器窗口的模組
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
function createWindow() {
// 創(chuàng)建瀏覽器窗口
const mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
// 書(shū)寫(xiě)渲染進(jìn)程中的配置
nodeIntegration: true, //開(kāi)啟true這一步很重要,目的是為了vue文件中可以引入node和electron相關(guān)的API
contextIsolation: false, // 可以使用require方法
enableRemoteModule: true, // 可以使用remote方法
},
})
let env = 'pro'
// 配置熱更新
if (env == 'pro') {
const elePath = path.join(__dirname, '../node_modules/electron')
require('electron-reload')('../', {
electron: require(elePath),
})
// 熱更新監(jiān)聽(tīng)窗口
mainWindow.loadURL('http://localhost:8888')
// 打開(kāi)開(kāi)發(fā)工具
mainWindow.webContents.openDevTools()
} else {
// 生產(chǎn)環(huán)境中要加載文件，打包的版本
// Menu.setApplicationMenu(null)
// 加載 index.html
mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增
}
}
// 這段程序?qū)?huì)在 Electron 結(jié)束初始化
// 和創(chuàng)建瀏覽器窗口的時(shí)候調(diào)用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 通常在 macOS 上，當(dāng)點(diǎn)擊 dock 中的應(yīng)用程序圖標(biāo)時(shí)，如果沒(méi)有其他
// 打開(kāi)的窗口，那么程序會(huì)重新創(chuàng)建一個(gè)窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，當(dāng)所有窗口都被關(guān)閉的時(shí)候退出程序。 因此，通常對(duì)程序和它們?cè)?// 任務(wù)欄上的圖標(biāo)來(lái)說(shuō)，應(yīng)當(dāng)保持活躍狀態(tài)，直到用戶(hù)使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
3.其中的env是閥門(mén)方便打包成app，開(kāi)發(fā)中熱更新就使用env=pro就好了
4.因?yàn)楸O(jiān)聽(tīng)的是8888端口，所以我們需要去更改vue的運(yùn)行端口，在vite.config.js中加入以下代碼
export default defineConfig({
plugins: [vue()],
server: {
port: 8888,
cors: true, // 允許跨域
hmr: true, // 開(kāi)啟熱更新
},
})
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-510725.html
5.開(kāi)啟兩個(gè)終端，一個(gè)終端運(yùn)行vue的項(xiàng)目啟動(dòng) 因?yàn)槲业氖悄J(rèn)配置 所以是 npm run dev
另一個(gè)終端運(yùn)行 npm run start,這個(gè)時(shí)候你就發(fā)現(xiàn)，代碼可以熱更新了
5.得到如下圖，就證明你的項(xiàng)目成功運(yùn)行了，熱更新也啟動(dòng)了
?6.打包
1.在上文的main.js配置中，已經(jīng)配置了打包的監(jiān)聽(tīng)的文件
2.我們需要下載打包模塊，我這里使用的是electron-builder 需要全局安裝
npm i electron-builder -D3.在vite.config.js中更改根路徑，新增base
?
4.在package.json中新增打包命令
"electron:build": "vite build & electron-builder build --config electron-builder.json"5.在src同級(jí)目錄中新建打包配置文件electron-builder.json，在里面加入以下代碼
{
"productName": "app名字",
"files": ["./electron/main.js", "./dist"],
"extraFiles": ["./videos", "./cvideo"], // 保留的文件夾
"directories": {
"output": "./buileder"
}
}
6.記住去把main.js中的env改成非pro 可以是pro2或者其他都可以，不是pro就行
?7.打開(kāi)終端運(yùn)行命令npm run electron:build
npm run electron:build等終端運(yùn)行完畢，會(huì)在目錄中生成一個(gè)builder文件夾，app就在里面
?到這里打包為exe就完成了，需要注意的是 這里是根據(jù)你自己的電腦配置打包的
這里我沒(méi)有去掉狀態(tài)欄，如果要去掉狀態(tài)欄，在main.js中把這個(gè)注釋解開(kāi)就好
都看到這里了，寫(xiě)教程不易，如果對(duì)你有幫助，給個(gè)點(diǎn)贊收藏不過(guò)分吧。?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-510725.html
?
到了這里，關(guān)于vite+ vue3（現(xiàn)有項(xiàng)目或者新項(xiàng)目）+electron打包教程，以及electron代碼熱重載頁(yè)面（保姆級(jí)教程）,一文帶你走完全過(guò)程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
