当前位置： 首页 > article >正文

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

article 2024/10/7 18:37:24

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

最后顺利打包成功

在这里插入图片描述


http://www.kler.cn/news/336337.html

相关文章：

  • 如何使用ssm实现基于Java的校园二手物品交易平台的设计与实现+vue
  • 【含开题报告+文档+PPT+源码】基于SpringBoot的校园互助平台设计与实现【包运行成功】
  • 多因素身份验证技术的原理及实现方式
  • node.js版本管理工具--nvm安装教程及配置(windows)
  • 【PostgreSQL】PG数据库表“膨胀”粗浅学习
  • UE4完整教程 UE4简介 UE4学习攻略及文件格式
  • ubuntu18.04 设置静态ip 00-installer-config.yaml
  • Leetcode - 140双周赛
  • 高轨SAR GESS系统1（CSDN_20241006）
  • 15分钟学 Python 第38天 ：Python 爬虫入门（四）
  • AJAX 3——原理：XMLHttpRequest+Promise
  • 108页PPT丨OGSM战略规划框架：实现企业目标的系统化方法论
  • Redis入门第一步：认识Redis与快速安装配置
  • LeetCode 347.前 K 个高频元素
  • rknn实现yolo5目标检测
  • Java中如何实现定时任务？
  • 大模型书籍强烈安利：《掌握NLP：从基础到大语言模型》（附PDF）
  • Linux下C++程序瘦身
  • Day02-JavaScript-Vue
  • python的字典介绍