vue项目使用electron

### 集成 Vue.js 和 Electron

为了在 Vue.js 项目中使用 Electron 构建桌面应用，需遵循一系列特定的操作流程来确保两者能够无缝协作。这不仅涉及基础环境的设置，还包括构建过程中的具体实现细节。

#### 安装必要的工具包

首先，在现有的 Vue.js 项目根目录下安装 `electron` 及其相关开发依赖项：

npm install electron --save-dev

此操作会下载并安装最新版本的 Electron 到项目的 devDependencies 中[^1]。

#### 修改 package.json 文件

接着修改 `package.json` 来添加启动脚本以及图标生成命令以便于后续打包过程中自动生成不同尺寸的应用程序图标文件:

{
  "name": "vue-electron-app",
  ...
  "main": "./background.js", // 添加主进程入口文件路径
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:generate-icons": "electron-icon-builder --input=./public/favicon.png --output=build --flatten",
    "start": " concurrently \"npm run serve\" \"wait-on http://localhost:8080 && electron .\"",
    "pack": "electron-packager ./dist myApp --platform=darwin win32 linux --arch=x64"
  },
  ...
}

上述配置中包含了用于同时运行 Vue 开发服务器和 Electron 应用的服务端口监听逻辑；同时也定义了一个简单的打包指令供最终发布时调用[^3]。

#### 创建主进程文件 background.js

创建一个新的 JavaScript 文件作为 Electron 主线程代码的位置 (`/background.js`) ，该文件负责管理窗口实例和其他系统级交互行为：

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

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(`http://localhost:${process.env.PORT || 8080}`)

  mainWindow.on('closed', function () {
    mainWindow = null;
  })
}

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

这段代码实现了基本的功能——当应用程序准备好之后打开一个浏览器窗口加载本地Vue服务地址，并处理关闭事件以确保良好的用户体验。

通过以上步骤就可以成功地在一个基于 Vue.js 的 Web 应用基础上集成了 Electron 功能，从而将其转换为支持多平台发布的桌面客户端软件解决方案。