小知識，大挑戰(zhàn)！本文正在參與「程序員必備小知識」創(chuàng)作活動
本文已參與 「掘力星計劃」 ，贏取創(chuàng)作大禮包，挑戰(zhàn)創(chuàng)作激勵金
在上一篇文章Vite+Electron快速構(gòu)建一個VUE3桌面應用中，我們了解了如何使用Vite和Electron來快速構(gòu)建一個Vue3桌面應用。但是，之前構(gòu)建的應用僅僅是一個簡單的版本。在開發(fā)過程中，為了更好的開發(fā)體驗，在開發(fā)electron的時候，肯定也希望能有動態(tài)模塊熱重載（HMR），更別說vite那迅雷不及掩耳盜鈴兒響叮當之勢的加載速度。
因此，接著上一篇文章所完成的項目代碼，我們來完成Vite和Electron開發(fā)時的動態(tài)模塊熱重載功能。
系列文章：
先說結(jié)論，可利用electron中的mainWindow.loadURL(<your-url>)來實現(xiàn)。
對于動態(tài)模塊熱重載功能來說，無論是webpack還是vite，其都是將構(gòu)建內(nèi)容存入內(nèi)存，因此我們無法使用mainWindow.loadFile('dist/index.html')這樣加載文件的方式。
但是，單純地改變該配置也是不行的，需要使用vite將開發(fā)服務器運行起來，可以正常運行動態(tài)模塊熱重載，而electron直接加載其開發(fā)服務器可訪問的url，即http://localhost:3000。
將mainWindow.loadFile('dist/index.html')更新為mainWindow.loadURL("http://localhost:3000")，更新后的文件如下所示：
// main.js
// 控制應用生命周期和創(chuàng)建原生瀏覽器窗口的模組
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
// 創(chuàng)建瀏覽器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加載 index.html
// mainWindow.loadFile('dist/index.html') 將該行改為下面這一行，加載url
mainWindow.loadURL("http://localhost:3000")
// 打開開發(fā)工具
// mainWindow.webContents.openDevTools()
}
// 這段程序?qū)?nbsp;Electron 結(jié)束初始化
// 和創(chuàng)建瀏覽器窗口的時候調(diào)用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 通常在 macOS 上，當點擊 dock 中的應用程序圖標時，如果沒有其他
// 打開的窗口，那么程序會重新創(chuàng)建一個窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，當所有窗口都被關(guān)閉的時候退出程序。 因此，通常對程序和它們在
// 任務欄上的圖標來說，應當保持活躍狀態(tài)，直到用戶使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// 在這個文件中，你可以包含應用程序剩余的所有部分的代碼，
// 也可以拆分成幾個文件，然后用 require 導入。
復制代碼修改文件vite.config.js的base，修改后的文件如下所示：
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
base: "./", // 新增
plugins: [vue()]
})
復制代碼為了使vite和electron正常運行，需要先運行vite，使得其開發(fā)服務器的url可以正常訪問，然后再開啟electron去加載url。
此處需要安裝兩個庫：
concurrently：阻塞運行多個命令，-k參數(shù)用來清除其它已經(jīng)存在或者掛掉的進程
wait-on：等待資源，此處用來等待url可訪問
首先來安裝。
yarn add -D concurrently wait-on 復制代碼
接著更新文件package.json，scripts新增兩條命令：
"scripts": {
"electron": "wait-on tcp:3000 && electron .",
"electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\""
},
復制代碼更新后完整內(nèi)容如下：
{
"name": "kuari",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron": "wait-on tcp:3000 && electron .",
"electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\""
},
"dependencies": {
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"concurrently": "^6.3.0",
"cross-env": "^7.0.3",
"electron": "^15.1.2",
"vite": "^2.6.4",
"wait-on": "^6.0.0"
}
}
復制代碼現(xiàn)已添加兩條命令：
yarn electron為等待tcp協(xié)議3000端口可訪問，然后執(zhí)行electron
yarn electron:serve為阻塞執(zhí)行開發(fā)服務器運行和yarn electron命令
運行項目只要執(zhí)行命令yarn electron:serve即可，當修改項目文件時，桌面應用也將自動更新。
