Electron+Vue3+ElectronForge整合 - 打包时整合 -分步打包

news2025/3/11 10:22:27

说明

本文介绍一下 Electron + Vue3 的打包整合的基本操作。

实现的效果是 ：
1、一个正常的Vue3项目；
2、整合加入 Electron 框架 ：
	 开发时 Electron 加载的是开发的vue项目；
3、完成打包时整合：
	3.1 先完成vue3项目的正常打包；
	3.2 再完成 electron 项目的打包。

步骤一：创建vue3项目

常规操作，不再赘述。

# 创建项目
npm create vue@latest

# 进入到项目目录
cd <your project dir>

# 安装依赖
npm install

# 启动访问
npm run dev

正经的vue项目启动成功！

在这里插入图片描述

此时的项目目录结构如下：是一个标准的vue3的项目结构

projectName
	| -- node_modules     # 依赖包的位置
	| -- public                   # 一些静态资源
	| -- src                       # 源文件目录
	| -- .gitignore             # git忽略配置文件 
	| -- env.d.ts            
	| -- index.html           # vue主页面
	| -- package.json      # 项目配置文件
	| -- tsconfig.json       # typescript 配置文件
	| -- vite.config.ts       # vite 配置文件

步骤二 ：引入Electron

1、安装Electron

# 安装Electron
npm install --save-dev electron

2、项目根目录下创建一个electron的工作目录

# 进入到项目的根目录
cd <your project name>

# 创建electron目录
mkdir electron

3、在electron目录下创建主进程 electronMain.js 文件

主要干了两个事儿 ： 1.创建主窗口；2.加载vue的页面进来（此时加载的还是开发时的路径）。

/**
 * electron 的主进程
 */
// 导入模块
const { app, BrowserWindow  } = require('electron')

// 创建主窗口
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })
  // 加载当前vue 的地址
  win.loadURL('http://localhost:5173')

}

// 应用准备就绪，加载窗口
app.whenReady().then(() => {
    createWindow()

    // mac 上默认保留一个窗口
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })

    console.log('--- app ready ---')
})

// 关闭所有窗口 ： 程序退出 ： windows & linux
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

4、修改package.json 文件内容

主要是 ：
1.配置 electron 的启动文件；
2.配置 vue项目的启动脚本；
3.配置electron的启动脚本。
4.删除文件中的 type:“module” 行，否则会有一个警告！

{
   // 其他的基础配置
   .....
 
  "main": "electron/electronMain.js",  // 指定 electron 的主进程文件
  "scripts": {
    "dev:vue": "vite",  // 指定 vue 启动脚本
    "dev:electron":"electron .",  // 指定 electron 启动脚本
    ......
  },
  
  // ......
}

至此，项目目录如下 ：

projectName
	| -- electron               # 【新增的electron的主目录】
		| -- electronMain.js 
	| -- node_modules     # 依赖包的位置
	| -- public                   # 一些静态资源
	| -- src                       # 源文件目录
	| -- .gitignore             # git忽略配置文件 
	| -- env.d.ts            
	| -- index.html           # vue主页面
	| -- package.json      # 项目配置文件
	| -- tsconfig.json       # typescript 配置文件
	| -- vite.config.ts       # vite 配置文件

步骤三：启动项目测试

注意 ： 因为我们是两个服务，所以，我们需要在两个独立的 命令行中分别启动项目。

1.启动vue

npm run dev:vue

页面独立访问：ok!

在这里插入图片描述

2.启动electron

npm run dev:electron

启动的app中也成功加载页面，且是热更新的。

在这里插入图片描述

至此 vue3 + electron 的 开发时的基础整合步骤就完成了。
可以把两个服务都停了，然后执行打包的步骤。

步骤四：打包整合的配置（本文核心）

本打包步骤使用官方推荐的 Electron Forge 工具进行electron的打包操作。
打包的思路是 ： 
    1、先把vue项目打包完成；
    2、再把electron打包完成。
需要注意的是 ： vue打包的配置 & electron 的打包配置。

1、electron-forge 依赖安装

npm install --save-dev @electron-forge/cli

2、import 导入 forge 的脚手架

以下命令执行完成后，会在 根目录下 生成 forge.config.js 配置文件。

npx electron-forge import

为了确保相关的依赖都安装了，可以再手动执行以下下面的命令。

npm install --save-dev @electron-forge/maker-squirrel 
npm install --save-dev @electron-forge/maker-deb 
npm install --save-dev @electron-forge/maker-rpm
npm install --save-dev @electron-forge/maker-zip
npm install --save-dev @electron-forge/maker-dmg

3、修改 forge.config.js 文件内容

主要是确保 配置中包含 windows 和 mac 的打包配置。
包含以下内容即可。不用太多。
主要看 makers 中的内容。

const { FusesPlugin } = require('@electron-forge/plugin-fuses');
const { FuseV1Options, FuseVersion } = require('@electron/fuses');

module.exports = {
  packagerConfig: {
    asar: true,
  },
  rebuildConfig: {},
  makers: [
    // windows 上的打包
    {
      name: '@electron-forge/maker-squirrel',
      config: {},
    },
  
    // mac 上的打包
    {
      name: '@electron-forge/maker-dmg',
      config: {
        //background: './assets/dmg-background.png',
        format: 'ULFO'
      }
    },
    // 打成 zip 的包，windows 上和 mac 上都有
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin','win32'],
    },

  ],
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
    // Fuses are used to enable/disable various Electron functionality
    // at package time, before code signing the application
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
};

4、修改package.json 文件的配置（关键）

主要是：
1.需要完善项目的 author、 description 属性的配置（打包时必须要用的属性）;
2.明确主要的打包脚本。
下面是 【package.json】 文件的内容节选。

{
  "name": "electronvuebuildtest", // 项目的名称，也是打包之后的程序名称
  "version": "1.0.0", // 版本信息
  "private": true,
  "author": "northcastle", // 作者信息，必填
  "description": "The Project of Electron + Vue3 + Electron Forge", // 描述信息，必填
  "main": "electron/electronMain.js",
  "scripts": {
    "dev:vue": "vite",  // 开发时启动 vue项目的脚本
    "dev:electron": "electron .", // 开发时 启动 electron 的脚本
    "build": "run-p type-check \"build-only {@}\" --", // 打包 vue 项目的脚本
    "build-only": "vite build", 
    "make": "electron-forge make" // 打包electron的脚本

    ......
  },
  "dependencies": {
     ...
  },
  "devDependencies": {
    ...
  }
}

5、修改vue项目的路由模式

开发环境使用 history 模式，打包后的使用 hash 模式。
否则会出现 打包后无法加载首页，导致空白的问题。

下面是路由文件中的部分内容，

import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL),
  history:createWebHashHistory(), // 使用hash模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
    。。。。。。
    其他的路由配置
  ]
})
export default router

6、修改vite的配置

a.修改vue的base属性为./ 相对路径

必须修改，否则打包后无法加载页面

b.修改vue的打包输出目录

主要是为了把 vue 打包的内容直接输出到 electron 的目录下，
这样就不用手动复制过去了。

》以下是上述两个的配置案例 ：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  
  // 就是下面的两个内容
  base:'./', // 修改一下相对路径，否则打包后electron无法识别到
  build:{
    outDir:'electron/pages', 
    // 打包的结果直接生成到 electron 的目录中去，这样electron 构建的时候，可以直接使用 index.html 了就
  }
})

7、修改 electronMain.js 中加载的页面路径

此时需要加载我们打包完成之后的vue的页面内容。

/**
 * electron 的主进程
 */
// 导入模块
const { app, BrowserWindow  } = require('electron')
const path = require('path')

// 创建主窗口
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })
  // 加载当前vue 的地址
  // win.loadURL('http://localhost:5173')

  // 加载打包之后的页面内容
  //******主要就是这里，加载的文件内容改变了******
  // 因为 vue 打包之后的内容，我们输出到了 electron/pages 目录下
  win.loadFile(path.resolve(__dirname,'pages/index.html'))

}

...
其他的内容不变

至此，所有打包的配置步骤就完了。下面就可以执行打包了

步骤五 ： 执行打包

1、vue打包

npm run build

正常的打包vue项目，
根据我们的配置，打包完成后，vue的内容将会保存到 electron/pages 目录下。

2、electron打包

npm run make

执行完成后，会完成electron的打包动作。
输出的内容将会默认保存到 out 目录中。

ok ，至此，electron + vue3 + electron forge 基本的打包步骤就完成了。
如果您完全按照我的步骤进行操作，则相信您已经成功构建出自己的项目啦。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1618227.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

情感识别——情感计算的模型和数据集调查

情感识别——情感计算的模型和数据集调查

概述 情感计算指的是识别人类情感、情绪和感觉的工作&#xff0c;已经成为语言学、社会学、心理学、计算机科学和生理学等领域大量研究的主题。 本文将概述情感计算的重要性&#xff0c;涵盖思想、概念和方法。 情感计算是皮卡德于 1997 年提出的一个想法&#xff0c;此后出…
阅读更多...
小案例：ToolBar+选项菜单

小案例：ToolBar+选项菜单

使用选项菜单&#xff0c;一般是用于做单选&#xff0c;需要重写方法&#xff1a; public boolean onCreateOptionsMenu(Menu menu) 如果想要实现事件监听&#xff0c;则采用基于回调的事件监听机制&#xff0c;可以监听到具体是哪一项被选中。即重写方法&#xff1a; publi…
阅读更多...
基于Spring Boot的点餐平台网站设计与实现

基于Spring Boot的点餐平台网站设计与实现

基于Spring Boot的点餐平台网站设计与实现 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 管理员登录界面&#xff0c;通过填写用户名、密码、角色…
阅读更多...
OpenHarmony实战开发-性能测试工具SmartPerf Editor使用指导

OpenHarmony实战开发-性能测试工具SmartPerf Editor使用指导

概述 SmartPerf Editor是一款PC端桌面应用&#xff0c;通过监测、采集应用运行时FPS、CPU、GPU、Memory、Battery、Network等性能数据&#xff0c;帮助开发者了解应用的性能状况。SmartPerf Editor还集成了DrawingDoc功能&#xff0c;可录制Render Service绘制指令&#xff0c…
阅读更多...
Idea如何本地调试线上测试服务器代码？

Idea如何本地调试线上测试服务器代码？

线上出现问题&#xff0c;但是没加日志打印拍脑门惋惜为啥不多打一行日志 加日志重新部署&#xff0c;半小时没了&#xff0c;问题还没有找到&#xff0c;头顶的灯却早已照亮了整层楼...... 排查别人线上的 bug&#xff0c;不仅代码还没看懂&#xff0c;还没一行日志&#…
阅读更多...
Linux 终端中的目录切换

Linux 终端中的目录切换

目录 ⛳️推荐 前言 理解 Linux 中的路径 利用 cd 命令变更目录 故障解决 文件或目录不存在 非目录错误 特殊目录符号 测试你的知识 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击…
阅读更多...
AD 21、22 软件安装教程

AD 21、22 软件安装教程

AD2022安装包链接 链接&#xff1a;https://pan.baidu.com/s/1oMNbXibQ1Zjl0RTLdPDVGw 提取码&#xff1a;xfs4 软件下载 1.以管理员身份运行 2. 3. 4. 5.路径最好改为C盘以外的&#xff0c;如D盘&#xff0c;要新建一个空文件夹 6. 7.下载好以后 8.在Crack文件夹下找…
阅读更多...
内插和抽取

内插和抽取

抽取&#xff1a; 频域表达式的关系&#xff1a; 1、角频率扩大M倍 2、移动2pi、22pi…&#xff08;n-1&#xff09; 2pi 3、相加 4、幅度变为1/M 内插&#xff1a; 加入低通滤波&#xff0c;减小混叠&#xff0c;但是由于截短&#xff0c;也会造成误差&#xff0c;但是…
阅读更多...
投资网站汇总

投资网站汇总

1、 中信证券(600030)历年财务指标——亿牛网https://eniu.com/gu/sh600030/cwzb 2、 3、 4、
阅读更多...
Linux中文件描述符与重定向的深入探索

Linux中文件描述符与重定向的深入探索

目录 1. 理解C语言的文件操作函数 2. 操作系统的文件操作接口 3. 文件描述符详解和其内核本质 4. 如何理解Linux下一切皆文件 5. Linux中的重定向 5.1 输出重定向 5.2 追加重定向 5.3 输入重定向 6. 结合文件描述符理解重定向 7.重定向的系统调用 在Linux操作系统中&a…
阅读更多...
Docker容器：镜像与容器命令管理

Docker容器：镜像与容器命令管理

目录 一、镜像管理命令 1、搜索镜像 2、获取镜像 3、镜像加速下载 4、查看下载的镜像文件信息 5、查看下载到本地的所有镜像 6、获取指定镜像的详细信息 7、为本地的镜像添加新的标签 8、删除镜像 8.1 删除指定的镜像 8.2 批量删除多个镜像 9、导出镜像与导入镜像 …
阅读更多...
CUDA线程管理

CUDA线程管理

核函数在主机端启动时&#xff0c;执行会转移到设备上&#xff0c;并且将控制权转移回主机。当核函数在GPU上运行时&#xff0c;主机可以运行其他函数。因此&#xff0c;主机与核函数是异步的。 此时&#xff0c;设备端也就是GPU上会产生大量的线程&#xff0c;并且每个线程都…
阅读更多...
汇编期末复习知识点

汇编期末复习知识点

参考文献1 第一章 概述 组成 计算机系统由硬件子系统和软件子系统组成。硬件子系统&#xff1a;组成计算机系统的所有电子的&#xff0c;机械的&#xff0c;光学的和磁性的元部件。 计算机中常用进制数表示 十进制(Decimal):数据尾部加一后缀D&#xff0c;如2355D二进制&a…
阅读更多...
【技巧】Git 版本控制工具没有图标提示怎么办？

【技巧】Git 版本控制工具没有图标提示怎么办？

Git 版本控制工具在日常开发中使用率是非常高的&#xff0c;多数情况下会安装 TortoiseGit 之类的插件&#xff0c;让文件夹显示图标&#xff0c;方便观察文件的状态。但是有时装完插件之后发现&#xff0c;文件夹/文件并没有图标显示&#xff0c;可以按照以下思路进行排查&…
阅读更多...
Git 核心概念与实操

Git 核心概念与实操

这里写目录标题 1 版本回退2 工作区、暂存区、本地仓库、远程仓库 1 版本回退 原文链接&#xff1a;https://www.liaoxuefeng.com/wiki/896043488029600/897013573512192 首先 git log 查看提交记录 在Git中&#xff0c;用 HEAD 表示当前版本 上一个版本就是 HEAD^ &#xff…
阅读更多...
Abaqus2024 安装教程(附免费安装包资源)

Abaqus2024 安装教程(附免费安装包资源)

鼠标右击软件压缩包&#xff0c;选择“解压到Abaqus2024”。 鼠标右击“此电脑”&#xff0c;选择“属性”。 点击“高级系统设置”。 点击“环境变量”。 点击“新建”。 变量名输入&#xff1a;NOLICENSECHECK 变量值输入&#xff1a;true 然后点击“确定”。 点击“确定”。…
阅读更多...
裤裤带你一起学C语言内存函数啦！

裤裤带你一起学C语言内存函数啦！

目录 1.memcpy的使用和模拟实现 2.memmove使用和模拟实现 3.memset函数的使用 4.memcmp函数的使用 内存函数在<string.h>库中&#xff0c;我们使用内存函数必须先引入<string.h>头文件 1.memcpy的使用和模拟实现 memcpy的函数原型如下&#xff1a; void * m…
阅读更多...
【重要】Heygen订阅指南和用法详解！让照片学说话？一张照片变演讲？Heygen订阅值得吗？

【重要】Heygen订阅指南和用法详解！让照片学说话？一张照片变演讲？Heygen订阅值得吗？

常见问题 Q&#xff1a;Heygen是什么&#xff1f;Heygen是什么玩意&#xff1f; A&#xff1a;Heygen是一款由AI视频工具,创作者只需要上传视频并选择要翻译的语言&#xff0c;该工具可实现自动翻译、调整音色、匹配嘴型。为了方便理解&#xff0c;笔者利用Heygen制作了一个AI视…
阅读更多...
QA测试开发工程师面试题满分问答20: 软件的安全性应从哪几个方面去测试？

QA测试开发工程师面试题满分问答20: 软件的安全性应从哪几个方面去测试？

软件的安全性测试应从多个方面进行&#xff0c;并确保覆盖以下关键方面&#xff1a; 当回答问题时&#xff0c;可以根据自己的经验和知识&#xff0c;从上述要点中选择适合的方面进行详细说明。强调测试的综合性、全面性和持续性&#xff0c;并强调测试的重要性以及如何与开发团…
阅读更多...
cdp集群主节点根目录磁盘扩容

cdp集群主节点根目录磁盘扩容

查看挂载点 df -h可以看到&#xff0c;根目录容量只有37G&#xff0c;现在对根目录进行扩容 查看根目录挂载的磁盘大小 lsblk挂载磁盘名字为vda&#xff0c;磁盘容量有80G&#xff0c;现在磁盘使用量为vda下面三个分区vda1&#xff0c;vda2&#xff0c;vda3容量之和&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023