Vue.js 打包成可执行文件 (EXE) 的详细教程
Vue.js 是一个用于创建用户界面的渐进式框架。有时我们需要将 Vue.js 应用打包成一个执行文件 (EXE)，让其能在没有浏览器的环境下运行。在这个教程中，我们将介绍如何使用 Electron 和 Vue-CLI 3 将 Vue.js 应用打包成一个可执行文件。
1. 准备工作
首先请确保已经安装了 Node.js (建议最新稳定版)，因为 Electron 和 Vue-CLI 3 都需要使用到 Node.js。
2. 使用 Vue-CLI 3 创建一个新的 Vue 项目
打开命令行，输入以下命令来安装 Vue-CLI 并创建一个新项目:
```bash
$ npm install -g @vue/cli
$ vue create my-vue-app
$ cd my-vue-app
```
当提示选择一个预设配置时，请选择 "Manually select features"，然后选择 "Babel", "Router", "Vuex" 和 "Linter / Formatter" 选项。
3. 给项目添加 Electron 构建插件
在项目目录中，运行以下命令安装 Vue CLI 插件 Electron 构建器：
```bash
$ vue add electron-builder
```
此插件将添加一个 `background.js` 文件 (在 `src-electron` 文件夹下)，该文件将用作 Electron 主进程。
你还需要在 `package.json` 文件中添加一个 "main" 属性，指向 "src-electron/background.js"。
```json
{
"main": "src-electron/background.js"
}
```
4. 编辑应用图标和窗口尺寸（可选）
编辑 `src-electron/background.js` 文件以添加一个应用图标和修改默认窗口大小。首先，可以将自定义图标放置在 `public` 文件夹中，例如命名为 `icon.ico`。然后在 `background.js` 文件中找到 `createWindow` 函数，修改宽度、高度和图标。这是一个示例：
```javascript
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 1024,
height: 768,
icon: path.join(__static, 'icon.ico'),
webPreferences: {
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
},
});
//... 其他代码不变
}
```
5. 运行Electron应用
到此为止，你已经为 Vue 项目配置了 Electron。可以使用以下命令运行：
```bash
$ npm run electron:serve
```
6. 打包 Vue 和 Electron 应用
要将应用打包成可执行文件，需要运行以下命令：
```bash
$ npm run electron:build
```
此命令将创建一个名为 "dist_electron" 的文件夹，其中包含各种版本的应用程序。在 "unpacked" 子文件夹中，你将找到一个 "yourAppName.exe" 文件，双击即可运行应用。
总结
Electron 可以满足我们将 Vue.js 应用转化为桌面应用的需求。使用 Vue-CLI 3 和 vue-cli-plugin-electron-builder，你可以更简便地集成这两个技术。你已经学会了如何为 Vue 项目配置 Electron，如何运行 Electron 应用，以及如何将 Vue 和 Electron 应用打包成可执行文件。希望这个教程可以帮助你顺利地在 Vue.js 项目中集成 Electron。
