Vue.js 是一个用于构建用户界面的框架，通常用于开发网页应用。然而，它也可以用来开发桌面应用。要将 Vue.js 应用打包成一个可执行的 exe 文件，我们可以使用 Electron。Electron 是一个使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架。
以下是将 Vue.js 应用打包成 exe 文件的步骤：
步骤 1：安装 Vue CLI
确保您已经安装了 Node.js。然后，使用以下命令安装 Vue CLI：
```
npm install -g @vue/cli
```
步骤 2：创建一个 Vue.js 项目
使用以下命令创建一个新的 Vue.js 项目：
```
vue create my-vue-app
```
将 "my-vue-app" 替换为您希望建立的项目名称。
步骤 3：在项目目录中安装 Electron
导航到项目目录并安装 Electron 依赖项：
```
cd my-vue-app
npm install electron@latest --save-dev
```
步骤 4：配置 Electron
在项目根目录下创建一个名为 "electron.js" 的文件。在 "electron.js" 文件中添加以下代码：
```javascript
const { app, BrowserWindow } = require('electron');
let win;
function createWindow() {
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('dist/index.html');
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
```
步骤 5：修改 package.json
打开 "package.json" 文件，进行以下修改：
1. 在 "scripts" 下添加一个名为 "electron" 的脚本，用于启动 Electron，并使其指向我们刚刚创建的 "electron.js" 文件：
```json
"scripts": {
...
"electron": "electron electron.js"
},
```
2. 添加一个 "main" 字段，并将其指向 "electron.js" 文件：
```json
"main": "electron.js",
```
步骤 6：构建 Vue.js 应用
运行以下命令构建 Vue.js 应用：
```
npm run build
```
步骤 7：运行 Electron 应用
使用以下命令启动 Electron 应用：
```
npm run electron
```
现在，您的 Vue.js 应用应该在一个独立的桌面窗口中运行。
步骤 8：将 Electron 应用打包成 exe 文件
要将 Electron 应用打包成一个 exe 文件，我们需要安装一个名为 electron-builder 的依赖项：
```
npm install electron-builder --save-dev
```
接下来，修改 "package.json" 文件，添加一个名为 "build" 的字段，配置 electron-builder：
```json
"build": {
"appId": "com.example.my-vue-app",
"productName": "MyVueApp",
"win": {
"target": "nsis"
},
"files": [
"dist/**/*",
"node_modules/**/*",
"electron.js"
],
"directories": {
"buildResources": "build",
"output": "release"
}
}
```
在项目根目录中创建一个名为 "build" 的文件夹，并在其中添加图标文件 "icon.ico"（可选），用于为应用程序设置图标。最后，在 "scripts" 下添加一个名为 "pack" 的新命令：
```json
"scripts": {
...
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
```
运行以下命令以生成 exe 安装程序：
```
npm run dist
```
exe 文件将保存在名为 "release" 的文件夹中。
以上就是将 Vue.js 应用打包成 exe 文件的方法。现在，您可以将此 exe 文件分享给其他人，以使他们在自己的 Windows 计算机上安装并运行您的 Vue.js 桌面应用程序。
