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

news2024/10/7 13:29:54

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 server
    win.loadURL('http://localhost:3000');
}

app.whenReady().then(() => {
    // Start the server
    exec('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_EXECUTE

2024/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

最后顺利打包成功

在这里插入图片描述