Vue生成EXE（原理或详细介绍）
在Web开发领域，Vue.js是一个很受欢迎的前端框架。通常，Vue.js用于构建单页面应用（SPA）。然而，有时我们可能想要将基于Vue.js的Web项目制作成为一个独立的可执行文件（EXE），这样就可以在不依赖于浏览器的情况下直接在Windows操作系统上运行。为了实现这个目的，我们可以使用electron。
Electron是一个使用JavaScript、HTML和CSS编写的框架，可以跨平台构建桌面应用程序。Electron可以将网页制作成可执行文件，它具有浏览器和桌面应用程序的特点。本文将讲解如何将Vue.js项目与Electron集成，以制作成EXE文件。
#### 1. 创建Vue项目
首先，我们需要创建一个Vue.js项目。要做到这一点，请确保已经安装了Node.js，然后安装Vue CLI（命令行工具）:
```bash
npm install -g @vue/cli
```
然后，创建一个新项目:
```bash
vue create my-vue-app
```
这将创建一个名为`my-vue-app`的Vue项目。进入项目文件夹：
```bash
cd my-vue-app
```
#### 2. 安装和设置Electron
接下来，我们将使用Electron Builder将项目打包成EXE。首先，安装以下依赖项：
```bash
npm install electron@latest --save-dev
npm install electron-builder@latest --save-dev
```
然后，在项目根目录下创建一个名为`electron.js`的新文件，并在该文件中编写以下内容：
```javascript
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadURL(`file://${__dirname}/dist/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文件，并添加以下内容：
在 "scripts" 部分添加:
```json
"electron": "vue-cli-service build && electron ./electron.js"
```
在 "build" 部分添加（如果没有 "build" ，则需要创建一个）:
```json
"build": {
"appId": "com.example.my-vue-app",
"productName": "my-vue-app",
"asar": true,
"extraFiles": [
{
"from": "./dist",
"to": "dist",
"filter": ["**/*"]
}
],
"win": {
"target": [
"exe"
],
"icon": "./public/favicon.ico"
}
}
```
#### 3. 构建和生成EXE文件
现在一切都准备好了。要生成EXE文件，只需运行以下命令：
```bash
npm run electron
```
这将生成一个dist_electron文件夹，该文件夹包含用于运行应用程序的可执行文件。你可以通过双击可执行文件来运行你的Vue.js应用程序。
#### 总结
通过本文，我们学习了如何使用Electron将Vue.js项目打包成Windows可执行文件。使用这种方法，我们可以利用基于Vue的前端应用程序创建出具有原生应用程序般体验的桌面程序。
