將Vue項目打包成可執行文件（.exe）可以方便地將應用程序部署到Windows系統上，而不需要用戶安exe文件轉換成apk裝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”

}

“`

其中，mainwindows應用開發屬性指定了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應用程序轉換為桌面應用程序，支持跨平臺部署，是一種非常方便的應用程序開發方式。