Vue.js是一个用于构建用户界面的渐进式JavaScript框架。尽管Vue.js主要关注于构建Web应用，但借助一些工具，也可以将Vue构建的项目打包成一个独立的可执行文件(.exe)，例如，使用 Electron.js 提供跨平台桌面应用程序的能力。在本教程中，我将简要概述将Vue 3.0项目打包为.exe文件的原理和步骤。
1. 环境准备：
你需要准备以下环境：
- Node.js (建议使用LTS版本)
- Vue CLI（官网教程 https://cli.vuejs.org/zh/guide/installation.html ）
2. 安装 Vue CLI 并创建一个新的 Vue 3.0 项目：
```bash
npm install -g @vue/cli
vue create my-vue-app
```
这里的`my-vue-app`是你的项目文件夹名称，可以根据需要自行更改。
3. 安装 Electron.js 相关依赖：
进入新创建的项目文件夹，使用以下命令添加 Electron.js相关依赖：
```bash
cd my-vue-app
vue add electron-builder
```
这将使用 electron-builder 扩展自动将 Electron.js 添加到你的 Vue 项目中。
4. 修改项目配置：
在项目的 `package.json` 中，修改 `"main"` 字段，使其指向 Electron.js 的入口文件：
```json
"main": "background.js",
```
同时，将 `"scripts"` 字段的 `"serve"` 和 `"build"` 命令改为如下：
```json
"scripts": {
"serve": "vue-cli-service electron:serve",
"build": "vue-cli-service electron:build"
}
```
5. 创建 Electron.js 入口文件：
在项目根目录下创建一个新的文件，名为 `background.js`，并编写以下代码：
```javascript
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
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()
}
})
```
这段代码会创建一个Electron窗口，并加载Vue应用。
6. 测试运行并打包：
首先，在项目根目录下运行以下命令测试运行 Electron 应用：
```bash
npm run serve
```
如果一切正常，你应该看到一个 Electron 窗口显示你的 Vue 3.0 应用。接下来，执行以下命令将项目打包成.exe文件：
```bash
npm run build
```
打包完成后，在项目目录下的 `/dist_electron` 文件夹中会生成相应的.exe文件。你可以将此可执行文件分发给使用Windows操作系统的用户，让他们运行你的应用。
总结：
这个基本教程演示了使用 Electron.js 将 Vue 3.0 项目打包为可执行文件(.exe)的基本原理和步骤。使用 Electron.js 能让你轻松地将Web应用转换为桌面应用，并实现跨平台的能力，方便你为更多用户提供你的应用功能。
需要注意的是，此教程仅为入门级别，如有需要，还需进一步了解 Electron 的文档（https://www.electronjs.org/docs ），以掌握更高级的用法和性能优化方法。
