Vue.js 是一个用于构建用户界面的渐进式框架。本教程将介绍如何将 Vue.js 项目打包为一个独立的 EXE 文件，这样用户就可以在不安装任何依赖的情况下运行应用程序了。我们将使用 NW.js 和 Vue CLI 来实现这个目标。请跟随以下步骤：
### 准备工作
1. 确保您已安装了 Node.js，可以在 [Node.js 官网](https://nodejs.org/en/) 下载安装。
2. 安装 Vue CLI。在命令行中输入如下命令：
```
npm install -g @vue/cli
```
### 步骤一：创建一个 Vue 项目
在命令行中输入如下命令：
```
vue create my_vue_exe_project
```
进入项目目录：
```
cd my_vue_exe_project
```
### 步骤二：添加 NW.js 相关依赖
首先安装 nwjs 和 nw-builder 依赖包。
```
npm install nw@latest --save
npm install nw-builder --save-dev
```
之后，在 `package.json` 文件中添加:
```json
"scripts": {
...
"serve:nw": "vue-cli-service serve --mode nw",
"build:nw": "vue-cli-service build && nwbuild -v 0.55.0-sdk --platforms win64 -- --side-by-side --name MyVueApp --winIco=./public/favicon.ico --Output=./dist_electron ./dist"
},
"main": "nw_blank.html"
```
在 `public` 目录下创建一个新的空白 HTML 文件（例如：nw_blank.html），这是 NW.js 打开的第一个文件，用于启动我们的 Vue 项目。
### 步骤三：配置 NW.js 启动文件
在 `public` 目录下创建一个 JavaScript 文件，如 `nw_launch.js`，用于启动 Vue 项目：
```javascript
nw.Window.open('http://localhost:8080', {
title: 'My Vue App',
frame: true,
width: 1280,
height: 800
}, function (new_win) {
// Other window options
});
```
接下来，修改 `public/nw_blank.html` 文件，引入 `nw_launch.js` 文件：
```html
```
### 步骤四：为 Vue 项目打包生成 exe 文件
在命令行中输入如下命令：
```
npm run build:nw
```
完成以上步骤后，`dist_electron` 文件夹内将包含一个名为 "MyVueApp" 的文件夹，其中包含了一个名为 "MyVueApp.exe" 的可执行文件。用户可以直接运行这个 exe 文件，无需安装额外的依赖，便可以使用你的 Vue.js 项目。
至此，我们已经将一个 Vue 项目成功打包为一个独立的 EXE 文件。您可以使用这个技术，将您的项目轻松地分发给不熟悉技术的用户。
