Electron桌面应用打包现有的vue项目

1 环境准备

• Node：v16.20.2（本地vue项目nodejs版本）
• Electron：22.3.7
• vue：2

版本管理

2 Vue项目准备

• 更新相关依赖
• npm install --registry https://registry.npmmirror.com/
• npm run dev

3、引入Electorn

• 安装指定版本Electron：npm install electron --save-dev
• 查看Electron版本：npx electron --version

注意：切换成国内源以及设置

• 切换国内源：npm config set registry https://registry.npmmirror.com
• 配置环境变量
  • ELECTRON_MIRROR:https://npmmirror.com/mirrors/electron/
  • ELECTRON_CUSTOM_DIR:{{ version }}

4、修改项目

4.1 根目录创建main.js

const { app, BrowserWindow } = require('electron');
const path = require('path');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false,},});win.loadFile(path.join(__dirname, 'dist/index.html')); // 修改为你的打包输出路径// 打开开发者工具win.webContents.openDevTools();
}app.whenReady().then(createWindow);
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

4.2 修改 package.json

在 package.json 中添加 Electron 启动脚本：

"main": "main.js",
"scripts": {"electron": "electron .","build": "vue-cli-service build" // 确保有这个构建命令
}

4.3 构建项目

npm run build

这将生成 dist 文件夹，包含生产环境的静态文件。

4.4 启动 Electron

npm run electron

5、使用内置web渲染vue

Electron 中启动一个内置的 Node.js Web 服务器来渲染用 Vue.js 编写的页面，可以使用 express 或其他类似的 Node.js Web 框架。以下是一个基本的实现步骤：

5.1 安装依赖

首先，确保您已安装 express 和 vue 相关的依赖。可以通过 npm 安装：

npm install express

5.2 设置 Express 服务器

在您的项目中创建一个新的文件，例如 server.js，并配置一个简单的 Express 服务器：

// server.js
const express = require('express');
const path = require('path');const app = express();
const PORT = 3000;// Serve static files from the Vue app
app.use(express.static(path.join(__dirname, 'dist')));// Handle all requests to serve the index.html file
app.get('*', (req, res) => {res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});app.listen(PORT, () => {console.log(`Server is running at http://localhost:${PORT}`);
});

5.3 修改 main.js

在主进程中，启动该服务器，并在 BrowserWindow 中加载它：

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const { exec } = require('child_process');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false,},});// Load the local serverwin.loadURL('http://localhost:3000');
}app.whenReady().then(() => {// Start the serverexec('node server.js', (err, stdout, stderr) => {if (err) {console.error(`Error starting server: ${stderr}`);return;}console.log(stdout);});createWindow();
});// Quit when all windows are closed
app.on('window-all-closed', () => {app.quit();
});

5.4 确保构建 Vue 应用

确保在启动 Electron 应用之前，您已经构建了 Vue 应用（例如运行 npm run build），以便生成 dist 文件夹。

5.5 启动项目

最后，启动 your Electron 应用：

npm start

6、打包项目

如果您想打包成可执行文件，可以使用 Electron Builder 或 Electron Packager。安装 Electron Builder：

npm install electron-builder --save-dev

然后在 package.json 中添加打包配置：

{"name": "your-app-name","version": "1.0.0","main": "main.js","scripts": {"start": "electron .","build": "vue-cli-service build", // 如果使用 Vue CLI"package": "electron-builder" // 如果使用 electron-builder},"devDependencies": {"electron": "^x.x.x", // 替换为您使用的版本"electron-builder": "^x.x.x" // 替换为您使用的版本}
}

打包命令：

npm run package

出错：

Get "https://github.com/electron/electron/releases/download/%7B%7B%20version%20%7D%7D/electron-v22.3.27-win32-ia32.zip": EOF
github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:206
github.com/develar/app-builder/pkg/download.(*Downloader).follow/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:234
github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:128
github.com/develar/app-builder/pkg/download.(*Downloader).Download/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:112
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).doDownload/Users/runner/work/app-builder/app-builder/pkg/electron/electronDownloader.go:203
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).Download/Users/runner/work/app-builder/app-builder/pkg/electron/electronDownloader.go:188
github.com/develar/app-builder/pkg/electron.downloadElectron.func1.1/Users/runner/work/app-builder/app-builder/pkg/electron/electronDownloader.go:73
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2/Users/runner/work/app-builder/app-builder/pkg/util/async.go:68
runtime.goexit/Users/runner/hostedtoolcache/go/1.21.12/arm64/src/runtime/asm_386.s:1363⨯ D:\projects\qihangerp-weishop\app\node_modules\app-builder-bin\win\ia32\app-builder.exe process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE2024/10/2 00:22:26

原因分析：

• 1、第一个错误是electron下载地址找错了。解决方案是：

  • 方案一：修改package.json修改正确的下载地址

      "build": {"electronDownload": {"mirror": "https://github.com/electron/electron/releases/download/"}},
    

  • 方案二：手动下载electron对应的版本包，放在C:\Users\qilip\AppData\Local\electron\Cache(直接将zip压缩包放进去)

• 2、electron-builder打包需要的三个关键文件下载失败问题：

winCodeSign-2.6.0.7z
nsis-resources-3.4.1.7z
Get nsis-3.0.4.1.7z

解决方案：

• 手动下载这三个包(https://github.com/electron-userland/electron-builder-binaries/releases?page=1)放到一下3个文件夹
  • C:\Users\qilip\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1
  • C:\Users\qilip\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1
  • C:\Users\qilip\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0

最后顺利打包成功