Vue 网页生成 EXE 文件（原理及详细介绍）
有时候，我们希望将 Vue 网页应用打包成桌面应用，比如 Windows 的 EXE 文件。本文将详细介绍如何使用 Electron 将 Vue 网页应用打包成 EXE 文件的过程。
一、Electron 简介
Electron 是由 Github 开发，用于将 web 开发技术（HTML，CSS 和 JavaScript）创建跨平台的桌面应用的开源库。Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs，你可以把你的 Vue 应用运行在 Electron 的壳中，从而实现桌面应用的功能。
二、创建项目
1. 安装 Vue CLI
首先，确保你已经安装了 Node.js。接下来，我们将使用 Vue CLI 快速搭建项目。在命令行中运行以下代码：
```
npm install -g @vue/cli
```
2. 创建 Vue 项目
使用以下命令快速创建一个新的 Vue 项目：
```
vue create vue-electron-app
```
接下来，进入项目文件夹：
```
cd vue-electron-app
```
三、集成 Electron
1. 添加 vue-cli-plugin-electron-builder
使用以下命令安装 Electron Builder 插件：
```
vue add electron-builder
```
安装完成后，会在项目中添加一个 electron-builder 文件夹，里面有个 background.js 文件，这是 Electron 的入口文件。
2. 运行 Electron
现在，我们可以在开发环境下运行 Electron 应用：
```
npm run electron:serve
```
如果一切正常，你应该看到你的 Vue 网页应用在一个独立的窗口中运行。
四、发布应用
1. 构建应用
使用以下命令构建生产环境版本的 Electron 应用：
```
npm run electron:build
```
这个命令将会构建 Windows、Mac 和 Linux 平台的应用文件（前提是在相应平台上构建），生成的文件将位于项目根目录下的 dist_electron 文件夹中。
2. 获取 EXE 文件
对于 Windows 平台，你将在 dist_electron\win-unpacked 目录下找到生成的 EXE 文件。其他平台可以在类似的位置找到相应的输出文件。
总结
现在，你已经成功将 Vue 网页应用打包成了 EXE 文件，并了解了其中的原理。Electron 是一个用于构建跨平台桌面应用程序的强大框架，在这里我们只是简要介绍了如何将 Vue 和 Electron 集成。您可以通过查阅 Electron 和 vue-cli-plugin-electron-builder 的文档，深入了解更多功能和定制选项。
