vite2打包exe操作步骤介绍

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应用程序打包成一个可执行文件，方便我们进行部署和发布。