Vite2是一個快速的web開發構建工具，它使用現代化的ES模塊化系統，可以在開發過程中實時編譯，提高了開發效率。但是在開發完成后，我們需要將項目打包成可執行文件，以便于部署和發布。本文將詳細介紹如何使用Vite2打包成exe文件的原理和步驟。
## 原理
Vite2打包成exe的原理是利用Electron打包技術，將Vite2生成的web應用程序打包成一個可執行文件。Electron是一個使用HTML，CSS和JavaScript構建跨平臺桌面應用程序的開源框架。它基于Node.js和Chromium瀏覽器，可以將Web應用程序打包成可在Windows，MacOS和Linux上運行的桌面應用程序。
Vite2使用Electron Builder插件來打包成exe文件。Electron Builder是一個基于Electron的打包器，它可以將Electron應用程序打包成Windows，MacOS和Linux可執行文件。它可以自動處理所有依賴項和構建腳本，并生成完整的安裝程序或可執行文件。
## 步驟
下面是使用Vite2打包成exe的詳細步驟：
### 1. 安裝Electron Builder
在項目根目錄下執行以下命令安裝Electron Builder：
“`
npm install electron-builder –save-dev
“`
### 2. 配置package.json
在p
ackage.json文件中添加以下配置：
“`
“build”: {
“productName”: “應用程序名稱”,
“appId”: “應用程序ID”,
“directories”: {
“output”: “dist_electron”
},
“files”: [
“dist/**/*”,
“main/**/*”,
“public/**/*”,
“package.json”
],
“extends”: null,
“mac”: {
“category”: “public.app-category.developer-tools”,
“icon”: “public/favicon.png”
},
“win”: {
“icon”: “public/favicon.ico”,
“target”: [
“nsis”,
“portable”
]
},
“linux”: {
“icon”: “public/favicon.png”
}
}
“`
其中，productName代表應用程序名稱，appId代表應用程序ID，directories.output代表輸出目錄，files代表需要打包的文件和目錄，mac、win和linux分別代表macOS、Windows和Linux系統下的打包配置。
### 3. 修改main.js文件
在src目錄下創建main.js文件，并添加以下內容：
“`
const { app, BrowserWindow } = require(‘electron’)
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
})
win.loadURL(‘http://localhost:3000’)
}
app.whenReady().then(() => {
createWindow()
app.on(‘activate’, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit()
}
})
“`
其中，createWindow函數用來創建窗口，loadURL函數用來加載Vite2開發服務器的URL。
### 4. 修改package.json文件
在package.json文件中添加以下內容：
“`
“scripts”: {
“electron:serve”: “cross-env NODE_ENV=development electron .”,
“electron:build”: “vue-tsc –noEmit && vite build && electron-builder build”
},
“`
其中，electron:serve用來啟動Electron開發服務器，electron:build用來打包成exe文件。
### 5. 打包成exe文件
在終端中執行以下如何自己制作exe應用程序命令：
“`
npm run electron:build
“`
網頁生成exe文件等待打包完成后，會在dist_electron目錄下生成可執行文件和安裝程序。
## 總結
本文介紹了使用Vite2打包成exe文件的原理和步驟。通過使用Electron Builder插件，我們可以將Vite2生成的web應用程序打包成一個可執行文件，方便我們進行部署和發布。
