Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。Vue 以其简单且灵活的 API 而受到许多开发者的喜爱。此教程将介绍如何将基于 Vue 3 的 Web 应用程序转换成一个可执行文件 (`.exe`)，以使你的应用可以在 Windows 操作系统上运行。我们将使用 Electron 作为主要工具来实现此功能。
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源框架。Node.js 和 Chromium 的组合使得 Electron 在 Web 技术和原生系统功能之间架起了桥梁。
下面是如何将 Vue 3 应用程序打包成 EXE 文件的详细步骤:
1. **创建一个 Vue 3 项目**
使用 Vue CLI 创建一个新的 Vue 3 项目 (`vue create your-project-name`)。进入项目目录 (`cd your-project-name`) 并运行 `npm run serve` 检查项目是否可以顺利启动。
2. **安装 Electron**
在项目目录中，使用以下命令安装 Electron 作为开发依赖项:
```
npm install electron --save-dev
```
3. **配置 Electron**
创建一个名为 'electron' 的新文件夹在项目根目录中。在 'electron' 文件夹里创建一个文件 `main.js` 作为 Electron 应用的入口文件。
接着，在项目的根目录中找到文件 `package.json`，在其中添加一个新属性：`"main": "electron/main.js"`。
你还需要在 `package.json` 的 `"scripts"` 部分添加一个新的脚本，以启动和打包 Electron 应用:
```
"scripts": {
...,
"electron:serve": "vue-cli-service electron:serve",
"electron:build": "vue-cli-service electron:build",
}
```
4. **编写 Electron 代码**
将以下代码粘贴到刚刚创建的 `electron/main.js` 文件中，以实现一个基本的 Electron 应用程序:
```js
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadURL('http://localhost:8080/')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
```
5. **启动 Electron 应用**
在终端中运行命令 `npm run electron:serve`，这会同时启动你的 Vue 3 项目和 Electron 应用，你会看到一个独立的桌面应用窗口显示你的 Vue 应用内容。
6. **打包应用**
运行命令 `npm run electron:build`，Vue CLI 会编译项目并打包为一个可执行文件。打包后的可执行文件可以在 `dist_electron` 文件夹中找到。此文件可以在 Windows 操作系统上直接运行，无需额外依赖。
通过以上步骤，你已成功将 Vue 3 应用打包成一个可执行文件。你可以为你的应用添加更多功能、优化性能和调整配置，完成你的跨平台桌面应用程序。
