Vue项目打包成exe是一种非常实用的打包方式，可以将Vue应用程序打包成一个可执行文件，方便在Windows系统上运行。这样的方法可以帮助您轻松地在没有安装Vue的环境中运行您的应用程序，同时还可以减少部署时间和维护成本。通过使用一些打包工具，如Webpack或Rollup，您可以将Vue应用程序打包成单个可执行文件，并把它转换为exe格式。这样的方法非常适合于小型应用程序或Web应用程序的本土化部署。
Vue是一款流行的JavaScript框架，用于构建现代Web应用程序。Vue的打包工具可以将Vue应用程序打包为静态文件，以便在Web服务器上部署。但是，有时候我们需如果要把Vue应用程序打包成可执行文件（EXE），以便在Windows环境中运行。本文将介绍如何将Vue应用程序打包成EXE文件，包括原理和详细步骤。
## 原理
将Vue应用程序打包成EXE文件的基本原理是将Vue应用程序打包成一个可执行文件，并把它包含在一个Windows安装程序中。这个安装程序可以将Vue应用程序安装到Windows计算机上，并创建一个快捷方法，以方便用户启动应用程序。
打包Vue应用程序成EXE文件的过程包括以下步骤
1. 将Vue应用程序打包成一个可执行文件。
2. 创建一个Windows安装程序，将Vue应用程序包含在其中。
3. 将Windows安装程序打包成一个EXE文件。
## 步骤
下面是将Vue应用程序打包成EXE文件的详细步骤
### 第一步安装打包工具
我们需要安装一个打包工具来将Vue应用程序打包成可执行文件。在这里，我们选择使用Electron Builder。请参考和仔细按照下面的步骤安装Electron Builder
1. 打开命令行窗口（Windows下为CMD或PowerShell，Mac下为终端）。
2. 输入以下命令来安装Electron Builder
```
npm install electron-builder --save-dev
```
### 第二步配置打包工具
下一步，我们需要配置Electron Builder，以便将Vue应用程序打包成可执行文件。请参考和仔细按照下面的步骤进行配置
1. 在Vue应用程序的根目录下创建一个electron-builder.json文件，并在其中添加以下配置
```
{
productName: My App,
appId: com.myapp,
directories: {
output: dist
},
files: [
dist/**/*
],
publish: [
{
provider: generic,
url: http://example.com/downloads/
}
],
win: {
target: nsis
}
}
```
2. 在package.json文件中添加以下脚本
```
scripts: {
dist: npm run build && electron-builder
}
```
### 第三步打包Vue应用程序
现在我们可使用以下命令来打包Vue应用程序
```
npm run dist
```
这个命令将会将Vue应用程序打包成一个可执行文件，并把它放在dist目录下。
### 第四步创建Windows安装程序
下一步，我们需要使用Electron Builder来创建一个Windows安装程序。请参考和仔细按照下面的步骤进行操作
1. 在Vue应用程序的根目录下创建一个build文件夹。
2. 在build文件夹中创建一个installer.nsh文件，并在其中添加以下代码
```
!define PRODUCT,NAME My App
!define PRODUCT,VERSION 1.0.0
!define COMPANY,NAME My Company
!define INSTALLER,NAME ${PRODUCT,NAME} ${PRODUCT,VERSION}.exe
!define INSTALLER,OUTFILE dist\${INSTALLER,NAME}
!define INSTALLER,ICON build\icon.ico
!define UNINSTALLER,ICON build\uninstall.ico
!define MUI,HEADERIMAGE build\header.bmp
!define MUI,WELCOMEFINISHPAGE,BITMAP build\background.bmp
!include MUI2.nsh
Name ${PRODUCT,NAME} ${PRODUCT,VERSION}
OutFile ${INSTALLER,OUTFILE}
InstallDir $PROGRAMFILES\${COMPANY,NAME}\${PRODUCT,NAME}
UninstallIcon ${UNINSTALLER,ICON}
Icon ${INSTALLER,ICON}
HeaderImage ${MUI,HEADERIMAGE}
!insertmacro MUI,PAGE,WELCOME
!insertmacro MUI,PAGE,LICENSE LICENSE.txt
!insertmacro MUI,PAGE,COMPONENTS
!insertmacro MUI,PAGE,DIRECTORY
!insertmacro MUI,PAGE,INSTFILES
!insertmacro MUI,PAGE,FINISH
!insertmacro MUI,UNPAGE,CONFIRM
!insertmacro MUI,UNPAGE,INSTFILES
!insertmacro MUI,LANGUAGE English
Section My App
SetOutPath $INSTDIR
File /r dist\*.*
SectionEnd
Section Uninstall
Delete $INSTDIR\*.*
RmDir $INSTDIR
SectionEnd
```
3. 在package.json文件中添加以下脚本
```
scripts: {
dist: npm run build && electron-builder,
installer: makensis build\\installer.nsh
}
```
4. 执行以下命令来创建Windows安装程序
```
npm run installer
```
这个命令将会创建一个Windows安装程序，并把它放在dist目录下。
### 第五步打包Windows安装程序成EXE文件
最后，我们需如果要把Windows安装程序打包成一个EXE文件。请参考和仔细按照下面的步骤进行操作
1. 下载并安装NSIS（Nullsoft Scriptable Install System）。
2. 在NSIS安装目录下创建一个build文件夹。
3. 将dist目