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

说明

本文介绍一下 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.需要完善项目的 authordescription 属性的配置(打包时必须要用的属性);
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 基本的打包步骤就完成了。
如果您完全按照我的步骤进行操作,则相信您已经成功构建出自己的项目啦。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

加州理工华人用AI颠覆数学证明!提速5倍震惊陶哲轩,80%数学步骤全自动化

加州理工团队解决了形式化研究神器Lean运行LLM推理时的核心技术挑战&#xff0c;可以让LLM在Lean中提出证明策略&#xff0c;允许人类以无缝的方式干预和修改。 Lean Copilot&#xff0c;让陶哲轩等众多数学家赞不绝口的这个形式化数学工具&#xff0c;又有超强进化了&#xf…

pytest教程-29-重复执行用例插件-pytest-repeat

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了设置用例超时时间插件pytest-timeout&#xff0c;本小节我们讲解一下pytest重复执行用例插件pytest-repeat。 前言 做功能测试的时候&#xff0c;经常会遇到某个模块不稳定&#xff0c;偶然会…

五款最受欢迎的上网行为管理软件

五款最受欢迎的上网行为管理软件 员工上网看视频怎么办&#xff1f;员工偷偷刷抖音怎么办&#xff1f;员工天天上招聘网&#xff0c;是不是有离职打算&#xff1f; 解决上述困扰的最好办法是使用监控软件了解员工一言一行。以下是几款推荐的上网行为管理和监控软件&#xff1a;…

【Linux】开关机命令和服务管理类命令

一般Linux是不会经常进行关机的,关机的正确流程是: sync->shutdown->reboot->poweroff sync: 将内存中的数据同步到硬盘中poweroff: 关闭系统,等同于shutdown -h nowreboot: 重启系统,等同于 shutdown -r nowshutdown[选项] [时间] shutdown命令常见用法: shutdown:…

二叉树的先序、中序和后序遍历,以及二叉树的高度

1、二叉树的三种遍历方式 前序遍历&#xff1a; 访问根节点前序遍历左子树前序遍历右子树示例&#xff1a;对于节点 A&#xff08;左子树为 B&#xff0c;右子树为 C&#xff09;&#xff0c;遍历顺序为 A -> B -> C。 中序遍历&#xff1a; 中序遍历左子树访问根节点中…

如何在Windows服务做性能测试(CPU、磁盘、内存)

目录 前言1. 基本知识2. 参数说明 前言 由于需要做一些接口测试&#xff0c;测试是否有真的优化 1. 基本知识 该基本知识主要用来用到Performance Monitor&#xff0c;以下着重介绍下这方面的知识 性能监视器&#xff08;Performance Monitor&#xff09;&#xff1a;Windo…

本地部署Docker容器可视化图形管理工具DockerUI并实现无公网IP远程访问——“cpolar内网穿透”

文章目录 前言1. 安装部署DockerUI2. 安装cpolar内网穿透3. 配置DockerUI公网访问地址4. 公网远程访问DockerUI5. 固定DockerUI公网地址 前言 DockerUI是一个docker容器镜像的可视化图形化管理工具。DockerUI可以用来轻松构建、管理和维护docker环境。它是完全开源且免费的。基…

Unity的旋转实现一些方法总结(案例:通过输入,玩家进行旋转移动)

目录 1. Transform.Rotate 方法 使用 2. Transform.rotation 或 Transform.localRotation 属性与四元数 使用方式&#xff1a; 小案例 &#xff1a;目标旋转角度计算&#xff1a;targetRotation&#xff08;Quaternion类型&#xff09; 玩家发现敌人位置&#xff0c;玩家…

八股中的记录

1. protected修饰符&#xff1a;同包或子类&#xff08;不同包&#xff09; 区分普通人和专业人调用的一些方法 2. 抽象&#xff1a;abstract修饰类和方法 抽象类不可实例化&#xff0c;避免错误的new对象 抽象方法是用abstract修饰的方法声明&#xff0c;没有方法体&#xff…

半导体存储器整理

半导体存储器用来存储大量的二值数据&#xff0c;它是计算机等大型数字系统中不可缺少的组成部分。按照集成度划分&#xff0c;半导体存储器属于大规模集成电路。 目前半导体存储器可以分为两大类&#xff1a; 只读存储器&#xff08;ROM&#xff0c;Read Only Memory&#xff…

MySQL连接失败

最近接手了公司的一个软件项目&#xff0c;通过打印日志&#xff0c;发现该软件会偶发出现连接MySQL数据库失败的问题。 首先排查是否是网络问题导致的连接失败。对该软件和MySQL的3306端口进行抓包&#xff0c;发现连接数据库失败时并没有出现tcp三次握手失败的情况。并且该软…

semaphore信号量使用+原理分析

1.概述 Semaphore 信号量&#xff0c;相当于一个计数器&#xff0c;通常用来限制线程的数量。 每个线程操作前会先获取一个许可证&#xff0c;逻辑处理完成之后就归还这个许可证。 通俗的解释&#xff1a;相当于一个停车场&#xff0c;有10个停车位&#xff0c;进来一个车&am…

按照以下步骤使用Transformer模型

“Transformer”是一种深度学习模型架构&#xff0c;用于处理序列数据&#xff0c;特别是在自然语言处理&#xff08;NLP&#xff09;领域中表现出色。它由Google Brain团队于2017年提出&#xff0c;并在机器翻译任务中取得了突破性的成果。Transformer的核心思想是完全基于自注…

指挥中心实战指挥平台-通信指挥类装备多链路聚合设备解决方案实例

一、建设目标及要求 坚持“一切为了实战、一切围绕实战、一切服务实战”的总要求&#xff0c;紧紧围绕大数据应用和自动化、智能化、智慧化这一主题主线&#xff0c;建设升级改造支队指挥中心&#xff0c;集成语音、视频、即时消息、短信、对讲、会议等多媒体通信能力&#xf…

基于SpringBoot的智慧物业管理设计与实现论文

摘  要 随着我国发展和城市开发&#xff0c;物业管理已形成规模&#xff0c;其效益也越来越明显。在经济效益对地方政府而言&#xff0c;主要体现为&#xff1a;减少了大量的财政补贴&#xff0c;对住宅区开发企业而言&#xff0c;能提高物业市场竞争力&#xff0c;使开发企…

场景 - 分库分表

分什么 数据量大分表&#xff0c;并发大分库 分表字段如何选择 如果对交易订单进行分表&#xff0c;可以选择的东西很多&#xff0c;比如说商户id&#xff0c;用户id&#xff0c;地区等等 分表的时候要考虑到数据倾斜问题 数据倾斜 比如说按商户号进行分表&#xff0c;一共…

什么是许可式邮件营销

许可式邮件营销&#xff08;Permission-based Email Marketing&#xff09;是一种营销策略&#xff0c;它依赖于接收者的同意或明确的许可来发送商业电子邮件。这种营销方式的核心在于尊重潜在客户或现有客户的选择权&#xff0c;通过提供价值和服务来建立和维护与客户的良好关…

@AutoWired和@Resource的区别

AutoWired和Resource的区别 这两个我们在项目中&#xff0c;经常去使用。很少有人知道他们有什么区别。下面我们将从 来源依赖查找顺序支持的参数依赖注入的用法支持 这四个方面来说明他们俩个的区别 来源 Autowired: 这是Spring框架自带的注解&#xff0c;用于实现自动依…

Git命令行操作(本地操作)

入口 1、任意目录》鼠标右键》Open Git Bash here 2、桌面快捷方式 本地库初始化 在本地库项目文件夹执行命令:git init 验证是否执行成功 .git目录中存放的是本地库相关的子目录和文件,不要删除、修改 设置签名 1、形式 用户名:tom Email地址:GoodMorning@qq.com 2、作…

六、项目发布-- 3. Node.js+express 编写书城首页API

前面那些准备工作做完之后&#xff0c;现在我们就具体来用Node.js来写一个简单的API 基本API编写&#xff1a; 建个后端文件夹&#xff0c;放到vscode打开 我们之前的代码都是前端代码&#xff0c;现在我们来做一个后端的代码。新建一个新的文件夹叫node_new_book&#xff0…