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: {
nodeIntegration: 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`目录下找到打包好的应用程序。
总结来说，使用Vite和Electron进行打包，需要先创建一个Electron的入口文件，然后在`package.json`文件中添加打包脚本和打包配置，最后执行打包命令即可。这种打包方式可以让我们将Vite打包出来的代码打包成一个可执行的应用程序，方便我们在本地运行和测试。
