Vite是一個基于ESM的快速構建工具，它的打包器默認使用Rollup來打包代碼。打包出來的代碼是一個JavaScript模塊，可以在瀏覽器中直接運行。
但是，有時候我們需要將Vite打包出來的代碼打包成一個可執行的應用程序，這時候就需要使用Electron來實現。本文將詳細介紹如何使用Vite和Electron來打包一個可執行的應用程序。
首先，我們需要安裝Electron：
“`
npm install electron –save-dev
“`
接著，我們需要在項目根目錄下創建一個Electron的入口文件，例如`main.js`：
“`javascript
const { app, BrowserWindow } = require(‘electron’)
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegrati橙光制作工具pc版on: true
}
})
win.loadFile(‘index.html’)
}
app.whenReady().then(() => {
createWindow()
app.on(‘activate’, function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on(‘window-all-closed’, function () {
if (process.platform !== ‘darwin’) app.quit()
})
“`
這個入口文件創建了一個Electron窗口，并加載了一個HTML文件。需要注意的是，由于Vite默認使用ESM，所以我們需要在Electron中將`nodeIntegration`設置為`true`，以支持使用`import`語法。
接下來，我們需要在`package.json`文件中添加一個打包腳本：
“`json
“scripts”: {
“build”: “vite build && electron-builder”
}
“`
這個打包腳本將先使用Vite進行打包，然后使用`electron-builder`將打包出來的代碼打包成一個可執行的應用程序。需要注意的是，我們需要先安裝`electron-builder`：
“`
npm install electron-builder –save-dev
“`
接著，我們需要在`package.json`文件中添加一些打包配置：
“`json
“build”: {
“appId”: “com.example.app”,
“productName”: “My App”,
“directories”: {
“output”: “dist_electron”
},
“files”: [
“dist/**/*”,
“main.js”,
“index.html”
],
“mac”: {
“category”: “public.app-category.developer-tools”
},
“win”: {
“target”: “nsis”,
“icon”: “icon.ico”
},
“nsis”: {
“oneClick”: false,
“perMachine”: true,
“allowElevation”: true,
“allowToChangeInstallationDirectory”: true,
“installerIcon”: “icon.ico”,
“uninstallerIcon”: “icon.ico”,
“installerHeaderIcon”: “icon.ico”
}
}
“`
這個配置文件中，我們指定了應用程序的ID、名稱和輸出目錄，以及需要打包的文件和圖標。對于Windows平臺，我們使用了NSIS安裝程序進行打包，同時指定了一些安裝程序的配置。
最后，我們可以執行打包命令：
“`
npm run build
“`
這個命令將使用Vite進行打包，然后使用`electron-builder`將打包出來的代碼打包成一個可執行的應用程序。打包完成后，我們可以在`dist_electron`目錄下找到打包好的應用程序。
總結來說，網站一鍵生成exe程序工具使用Vite和Electron進行打包，需要先創建一個Electron的入口文件，然后在`package.json`文件中添加打包腳本和打包配置，最后執行打包命令即可。這種打包方式可以讓我們將Vite打包出來的代碼打包成一個可執行的應用程序，方便我們在本地運行和測試。
