在本文章中，我们将学习如何将Vue.js项目打包成可执行文件（.exe），为你在Windows系统上部署和分发Vue.js应用程序提供方便。我们将使用 Vue CLI 3和Electron框架来实现此目标。
### 一、先决条件：
确保你的系统上已安装以下软件：
- Node.js (建议使用 12.x 或更高版本)
- npm (随Node.js一起安装)
- Vue CLI 3
- Git（可选，用于克隆示例项目）
### 二、步骤
#### 1. 创建Vue项目：
如果你还没有Vue项目，请使用以下命令使用Vue CLI create一个新项目：
```bash
vue create my-vue-app
```
#### 2. 为项目添加Electron插件
进入到项目文件夹，然后使用以下命令将Electron插件添加到您的Vue项目中：
```bash
cd my-vue-app
vue add electron-builder
```
这将向你的项目中添加electron、electron-builder等相关依赖。
#### 3. 配置Electron
在`src`文件夹下创建一个名为`background.js`的文件，此文件将作为Electron的主文件。内容如下：
```javascript
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadURL(process.env.WEBPACK_DEV_SERVER_URL
? process.env.WEBPACK_DEV_SERVER_URL
: `file://${__dirname}/index.html`);
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
```
然后，在`package.json`文件中，更改`serving`和`building`命令，以使用`background.js`作为Electron的入口文件，如下所示：
```json
{
"scripts": {
"electron:serve": "vue-cli-service electron:serve --entry src/background.js",
"electron:build": "vue-cli-service electron:build --entry src/background.js"
}
}
```
#### 4. 运行和构建应用
要运行你的Electron应用，请执行以下命令：
```bash
npm run electron:serve
```
要构建可执行文件，请执行以下命令：
```bash
npm run electron:build
```
构建完成后，可以在 `dist_electron` 文件夹中找到 '.exe' 文件，将其提取出来。现在，你的Vue.js项目已经打包成一个可执行文件了！
当用户双击启动可执行文件时，将会展示你的Vue.js应用程序界面。
### 三、总结
现在，你已经学会了如何使用Vue CLI 3和Electron将Vue.js项目打包成可执行的Windows文件。你可以将这个技能用于将你的前端项目封装成桌面应用程序并分发给用户。
