vue项目打包为exe

将Vue项目打包成可执行文件（.exe）可以方便地将应用程序部署到Windows系统上，而不需要用户安装Node.js和Vue等依赖项。本文将介绍如何使用Electron框架将Vue项目打包成可执行文件。

一、什么是Electron

Electron是一个基于Chromium和Node.js的框架，可以用于创建跨平台的桌面应用程序。Electron支持Windows、macOS和Linux等操作系统，并且可以使用HTML、CSS和JavaScript等Web技术进行应用程序开发。

二、安装Electron

首先需要安装Electron，可以使用npm进行安装。在终端中执行以下命令：

```

npm install electron --save-dev

```

三、创建Electron应用程序

在Vue项目根目录下创建一个新的文件夹，用于存放Electron应用程序的代码。在该文件夹中创建以下文件：

1. main.js：Electron应用程序的主进程代码。

2. index.html：Electron应用程序的渲染进程代码。

3. package.json：Electron应用程序的配置文件。

四、配置package.json

在package.json中添加以下代码：

```

"main": "main.js",

"scripts": {

"start": "electron ."

},

"dependencies": {

"electron": "^9.2.0"

}

```

其中，main属性指定了Electron应用程序的主进程代码文件名，scripts属性中的start命令用于启动Electron应用程序，dependencies属性中添加了Electron的依赖项。

五、编写main.js

在main.js中添加以下代码：

```

const { app, BrowserWindow } = require('electron')

const path = require('path')

function createWindow () {

const win = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

nodeIntegration: true,

preload: path.join(__dirname, 'preload.js')

}

})

win.loadFile('index.html')

}

app.whenReady().then(() => {

createWindow()

app.on('activate', () => {

if (BrowserWindow.getAllWindows().length === 0) {

createWindow()

}

})

})

app.on('window-all-closed', () => {

if (process.platform !== 'darwin') {

app.quit()

}

})

```

该代码中，使用了Electron的API创建了一个窗口，并且加载了index.html文件。

六、编写index.html

在index.html中添加Vue应用程序的代码，可以使用Vue CLI创建的默认模板。需要注意的是，需要将Vue应用程序的入口文件从main.js改为app.js。

七、打包Electron应用程序

在终端中执行以下命令，将Electron应用程序打包成可执行文件：

```

npm run electron:build

```

该命令会使用electron-builder插件将Electron应用程序打包成可执行文件，支持Windows、macOS和Linux等操作系统。

八、运行Electron应用程序

在打包完成后，可以在dist目录中找到生成的可执行文件。在Windows系统中，双击该文件即可运行Electron应用程序。

总结：

本文介绍了如何使用Electron框架将Vue项目打包成可执行文件。使用Electron可以方便地将Web应用程序转换为桌面应用程序，支持跨平台部署，是一种非常方便的应用程序开发方式。