想要将 Vue2 应用程序打包成桌面应用程序（.exe）可以使用Electron这个框架，Electron框架提供了一套可以使用Web技术（HTML、CSS 和 JavaScript）来创建跨平台的桌面应用程序的技术手段。下面我们就来看看如何将一个Vue2的应用程序打包成一个可执行的exe文件。

前提条件

要想使用Electron框架，首先需要保证系统中已经安装了如下的一些工具。

• Node.js 已安装
• npm 或 yarn 包管理器已安装
• Vue2 项目已经创建并且可以正常运行

步骤一：安装 Electron

在Vue的项目中，可以通过如下的方式来安装Electron

npm install --save-dev electron

步骤二：创建主进程文件

在main.js中创建一个主进程操作，如下所示。

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

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载你的 Vue 应用程序的入口文件，例如 index.html
  mainWindow.loadFile('dist/index.html')
}

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

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

步骤三：配置 package.json

配置好main.js文件之后，接下来就是需要配置package.json文件，需要在package.json文件中添加Electron启动脚本，如下所示。

{
  "name": "your-app-name",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron-dev": "electron .",
    "electron-pack": "electron-builder"
  },
  "devDependencies": {
    "electron": "^latest_version",
    "electron-builder": "^latest_version"
  },
  "build": {
    "appId": "com.yourapp.id",
    "mac": {
      "category": "your.app.category"
    },
    "win": {
      "target": "nsis"
    },
    "linux": {
      "target": [
        "AppImage"
      ]
    }
  }
}

构建 Vue 应用程序

添加完成之后，可以通过如下操作来构建Vue应用程序会在dist目中生成对应的文件。如下所示。

npm run build

步骤五：运行Electron应用程序

根据上面的配置，我们可以通过如下的命令来运行Electron应用程序

npm run electron-dev

然后可以通过如下的命令来打包应用程序。

npm run electron-pack

这会根据package.json中的配置为不同的平台生成安装程序和可执行文件。打包完成后，你可以在dist_electron或类似目录中找到生成的 .exe 文件。

总结

通过上面的操作我们就可以完成将一个Vue2的应用程序打包成一个可运行的桌面应用程序，在实际使用场景中，我们可以根据需要来进一步自定义Electron的配置和打包选项，以适应特定需求。