Vite + Vue3 + Electron 创建打包桌面程序

10 【Vite + Vue3 + Electron 创建打包桌面程序】

1.使用 Vite 构建 Electron 项目

1.1 创建 Vite 应用，安装 Electron 依赖

创建一个 Vite 项目

npm init vite@latest

安装 Electron 相关依赖

npm install electron -D
npm install vite-plugin-electron -D

1.2 在 vite.config.ts 中，配置 Electron 入口文件

image-20230112210747636

根据上方官网提示，创建 electron/main/index.ts，与 src 目录同级

image-20230112210930657

配置 Electron 入口文件 —— 打开 vite.config.ts，引入 electron/main/index.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
 
export default defineConfig({
  plugins: [vue(), electron({
    main: {
      // 配置 Electron 入口文件
			entry: 'electron/main/index.ts',    
    }
  })]
})

这么配置，就启动一个 Vite 应用就行。

1.3 编写 electron / index.ts

1.3.1 app、BrowserWindow

在 electron 依赖中，可以引入 app、BrowserWindow：

  • app 控制应用程序的事件生命周期（相当于应用程序）
  • BrowserWindow 创建并控制浏览器窗口（相当于打开桌面弹框）

实例化 BrowserWindow 对象，创建一个窗口，在内部通过 nodeIntegration、contextIsolation 集成网页和 Node.js（也就是在渲染进程中，可以调用 Node.js 方法）

1.3.2 使用 win.loadURL 加载窗口 / Vite 环境变量

使用 win.loadURL 加载窗口，接收的网址是指：Vite 启动后，会在本地运行一个服务，把这个服务网址丢进去就行

  • 使用 Vite 自带的环境变量 VITE_DEV_SERVER_HOST
  • 如果是 undefined，就换成 VITE_DEV_SERVER_HOSTNAME（现在应该采用这个了）
  • ps：在 Vite 3.2.41中，使用 VITE_DEV_SERVER_URL 表示 Vite 服务器本地路径

关于 Vite 环境变量，可以去终端看下

image-20230112211200258

1.3.3 使用 app.whenReady() 初始化app

最后，使用 app.whenReady() 初始化app（在 Electron 完成初始化时触发）

初始化完成后，再挂载上面创建的 桌面应用程序窗口

1.3.4 整理 electron/main/index.ts

  • 开发环境下，我们访问的是 Vite 本地服务
  • 打包之后，我们访问的是 dist 静态文件

要修改 win.loadURL 中的路径参数，判断下当前是生产环境，还是开发环境

在 electron/main/index.ts中，写入下方代码

// app 控制应用程序的事件生命周期（相当于应用程序）
// BrowserWindow 创建并控制浏览器窗口（相当于打开桌面弹框）
import { app, BrowserWindow } from 'electron'
import { join } from 'node:path'
 
// 定义全局变量，获取窗口实例
let win: BrowserWindow | null;
 
/**
 * 创建一个窗口
 */
const createWindow = () => {
  win = new BrowserWindow({
    title: 'Main window',
    icon: join(process.env.PUBLIC, 'favicon.ico'),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
      nodeIntegration: true,
      contextIsolation: false,
    }
  })
  
    // 集成网页和 Node.js 后，需要加载
    // 这里接收的网址是指：Vite 启动后，会在本地运行一个服务，把这个服务网址丢进去就行
  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
    // Open devTool if the app is not packaged
    win.webContents.openDevTools()
  } else {
    win.loadFile(join(process.env.DIST, 'index.html'))
  }
  
}
 
// 初始化app（在 Electron 完成初始化时触发），挂载上面创建的 桌面应用程序窗口
app.whenReady().then(createWindow)

1.4 配置 package json，运行项目

1.4.1 运行项目后，出现的两个报错

启动项目后，出现下面两个报错

image-20230112211622286

image-20230112211645212

综上所述，需要在 package.json 中，增加 main 字段，去掉 type 字段

{
  "name": "electron-vue-vite",
  "version": "1.0.0",
  "main": "dist-electron/main/index.js",
  "description": "Electron + Vue + Vite.",
  "author": "dselegent",
  "license": "MIT",
  "keywords": [
    "electron",
    "rollup",
    "vite",
    "vue3",
    "vue"
  ],
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "electron": "^22.0.0",
    "electron-builder": "^23.6.0",
    "typescript": "^4.9.4",
    "vite": "^4.0.3",
    "vite-plugin-electron": "^0.11.1",
    "vite-plugin-electron-renderer": "^0.11.4",
    "vue": "^3.2.45",
    "vue-tsc": "^1.0.16"
  }
}
1.4.2 开发环境运行效果

运行项目 npm run dev

2.打包 Electron 桌面程序

3.1 安装打包依赖，调整打包命令

安装打包依赖 electron-builder

npm install electron-builder -D

安装完成后，在 package json 中，配置 build 命令

"build": "vue-tsc --noEmit && vite build && electron-builder",

3.2 增加 electron-builder 相关配置

appId、productName… —— 应用基本信息信息

win、mac —— 不同类型设备配置

nsis—— 桌面应用程序安装过程的配置

在根目录配置electron-builder.json5

/**
 * @see https://www.electron.build/configuration/configuration
 */
{
  appId: 'com.electron.desktop',
  asar: true,
  icon: 'public/favicon.ico',
  copyright: 'Copyright © 2022 electron',
  directories: {
    // 输出路径
    output: 'release/${version}',
  },
  productName: 'electron',
  files: ['dist-electron', 'dist'],
  // mac 配置
  mac: {
    artifactName: '${productName}_${version}.${ext}',
    target: ['dmg'],
  },
  // windows 配置
  win: {
    target: [
      {
        target: 'nsis',
        arch: ['x64'],
      },
    ],
    artifactName: '${productName}_${version}.${ext}',
  },
  // 应用程序的安装过程配置
  nsis: {
    // 关闭了一键集成，因此会走 下一步、下一步、下一步... 进行安装
    oneClick: false,
    perMachine: false,
    allowToChangeInstallationDirectory: true,
    deleteAppDataOnUninstall: false,
  },
}

3.3 nsis（桌面应用程序安装过程）配置一览

{ 
  // 一键安装程序、或者辅助安装程序（默认是一键安装）
  "oneClick": false,
  // 是否允许请求提升，如果为 false，则用户必须使用提升的权限重新启动安装程序（仅作用于辅助安装程序）
  "allowElevation": true, 
  // 是否允许修改安装目录（仅作用于辅助安装程序）
  "allowToChangeInstallationDirectory": true,
  // 安装程序图标的路径
  "installerIcon": "public/timg.ico",
  // 卸载程序图标的路径
  "uninstallerIcon": "public/timg.ico",
  // 安装时头部图片路径（仅作用于辅助安装程序）
  "installerHeader": "public/timg.ico",
  // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）
  "installerHeaderIcon": "public/timg.ico",
  // 安装完毕界面图片的路径，图片后缀.bmp，尺寸 164*314（仅作用于辅助安装程序）
  "installerSidebar": "public/installerSiddebar.bmp",
  // 开始卸载界面图片的路径，图片后缀.bmp，尺寸 164*314（仅作用于辅助安装程序）
  "uninstallerSidebar": "public/uninstallerSiddebar.bmp",
  // 控制面板中的卸载程序显示名称
  "uninstallDisplayName": "${productName}${version}",
  // 是否创建桌面快捷方式
  "createDesktopShortcut": true,
  // 是否创建开始菜单快捷方式
  "createStartMenuShortcut": true,
  // 用于快捷方式的名称，默认为应用程序名称
  "shortcutName": "TestApp",
  // NSIS 包含定制安装程序脚本的路径，安装过程中自行调用 (可用于写入注册表 开机自启动等操作)
  "include": "script/installer.nsi",
  // 用于自定义安装程序的 NSIS 脚本的路径
  "script": "script/installer.nsi",
  // 是否在卸载时删除应用程序数据（仅作用于一键安装程序）
  "deleteAppDataOnUninstall": false,
  // 完成后是否运行已安装的应用程序（对于辅助安装程序，应删除相应的复选框）
  "runAfterFinish": true,
  // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为 true，则使用公司名称
  "menuCategory": false,
}

3.4 执行打包，安装应用

npm run build

打包成功后，生成的文件都放到了 release 目录下（之前是这么配置的）

双击 exe 结尾的文件，就能运行桌面应用程序了

image-20230112212528749

3.5 主进程接收渲染进程消息时，在控制台输出乱码

加上 chcp 65001 输出中文

加上 cross-env NODE_ENV=development 实现自定义开发时的环境变量

最终 dev 命令如下：

"dev": "chcp 65001 && cross-env NODE_ENV=development vite"

4.实现 渲染进程 / 主进程 通信（IPC）

4.1 让 Vite 支持 ipcRenderer

使用 ipcRenderer 进行通信

默认情况下，Vite 不支持 ipcRenderer，得安装插件 vite-plugin-electron-renderer 让他支持，同时安装了 vite-plugin-electron-renderer。

修改 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import renderer from 'vite-plugin-electron-renderer'
 
export default defineConfig({
  plugins: [vue(), electron({
    main: {
       entry: 'electron/main/index.ts',
    }
  }), 
   // Use Node.js API in the Renderer-process
  renderer({
    nodeIntegration: true,
  }),
 ],
  build:{
    emptyOutDir: false,
  }
})

这样，就实现了让 Vite 支持 ipcRenderer

4.2 渲染进程发送消息，主进程接收消息

渲染进程使用 ipcRenderer.send() 发送消息

在 vue 文件中，添加一个按钮，点击后通过 ipcRenderer 给主进程发消息

import { ipcRenderer } from 'electron'

const open = () => {
 ipcRenderer.send('message', 12321)
}

主进程使用 ipcMain.on() 接收消息

在electron/ main/index.ts文件中，引入 ipcMain，监听.vue文件发出的消息

import { app, BrowserWindow, ipcMain } from 'electron'
 
// 这段代码在 createWindow 创建窗口函数内执行
ipcMain.on('message', (_, value) => {
    console.log(value, '来了')
})

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

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

相关文章

前端学习--React部分

前端学习--React部分

文章目录 前端学习--React部分前言1.React简介1.1React的特点1.2引入文件1.3JSX🍉JSX简介与使用🍉JSX语法规则 1.4模块与组件🍉模块🍉组件 1.5安装开发者工具 2.React面向组件编程2.1创建组件🍉函数式组件&#x1f349…
阅读更多...
sql注入利用group_concat函数

sql注入利用group_concat函数

1.group_concat函数的作用： 首先根据group by指定的列进行分组，将同一组的列显示出来，并且用分隔符分隔。 2.group_concat运用 这里我使用的是sqllab-less1，通过对数据库的查询，我们发现数据库表名，列名&a…
阅读更多...
机器之心 | 清华接手，YOLOv10问世：性能大幅提升，登上GitHub热榜

机器之心 | 清华接手，YOLOv10问世：性能大幅提升，登上GitHub热榜

本文来源公众号“机器之心”，仅用于学术分享，侵权删，干货满满。 原文链接：清华接手，YOLOv10问世：性能大幅提升，登上GitHub热榜 相同性能情况下，延迟减少 46%，参数减少 2…
阅读更多...
微软Copilot+ PC：Phi-Silica

微软Copilot+ PC：Phi-Silica

大模型技术论文不断，每个月总会新增上千篇。本专栏精选论文重点解读，主题还是围绕着行业实践和工程量产。若在某个环节出现卡点，可以回到大模型必备腔调重新阅读。而最新科技（Mamba，xLSTM,KAN）则提供了大模…
阅读更多...
美股重大变化，结算周期将从T+2变成T+1

美股重大变化，结算周期将从T+2变成T+1

KlipC报道：当地时间5月28日，美国证券交易结算时间将从“T2”改为“T1”。美股迎来历史性时刻。 目前，美股实行的是T0交易制度，T2结算交割制度。即投资者买入一只股票，当天可以卖出，但是交易的结算并不是立…
阅读更多...
QT学习（20）：QStyle和自定义样式

QT学习（20）：QStyle和自定义样式

QStyle 样式（继承自QStyle类）代表控件的绘制并封装GUI的外观。QStyle是一个封装了GUI外观的抽象基类。Qt使用QStyle去执行几乎所有的内置控件的绘制，确保控件外观和原生控件风格风格相同。 class Q_WIDGETS_EXPORT QStyle : public QObject{…
阅读更多...
Docker 基础使用 (1)

Docker 基础使用 (1)

文章目录 Docker 软件安装Docker 镜像仓库Docker 仓库指令Docker 镜像指令Docker 容器指令Docker 使用实例 —— 搭建 nginx 服务nginx 概念nginx 使用用 docker 启动 nginx 侧重对docker基本使用的概览。 Docker 软件安装 Linux Ubuntu 依次执行以下指令即可 # 更新软件包列…
阅读更多...
Spring：事务(tx)

Spring：事务(tx)

1. 简介 spring对jdbc进行封装&#xff0c;简化对数据库的操作 2. HelloWorld 1. 搭建模块 2.加入依赖 <dependencies><!--spring jdbc Spring 持久化层支持jar包--><dependency><groupId>org.springframework</groupId><artifactId>s…
阅读更多...
Unity Dotween 定位点的制作

Unity Dotween 定位点的制作

目录 前言 一、动画预览 二、动画拆分 三、素材准备 四、曲线 OutCirc详解 五、速度分类详解 六、代码 七、组件和设置 八、作者的话 前言 我答应我的粉丝接下来更新Dotween系列&#xff0c;但是我一直没想好&#xff0c;从哪里开始讲。 Dotween的安装我就跳过了&…
阅读更多...
一款220V降12V恒压芯片电路原理图WT5114

一款220V降12V恒压芯片电路原理图WT5114

一款220V降12V恒压芯片电路原理图WT5114&#xff0c;电路图简示如下&#xff1a; 一款220V降12V恒压芯片线路图WT5114 WT5114是一款高性能、高精度、低成本的PWM电源开关&#xff0c;适用于非隔离降压和反激式应用。它集成了专用电流模式PWM控制器&#xff08;采用SOP8封装的高…
阅读更多...
埃及媒体分发投放-新闻媒体通稿发布

埃及媒体分发投放-新闻媒体通稿发布

埃及商业新闻 大舍传媒近日宣布将在埃及商业新闻领域展开新的媒体分发投放。作为埃及最具影响力的商业新闻平台之一&#xff0c;埃及商业新闻将为大舍传媒提供广阔的市场和受众群体。这一合作意味着大舍传媒将有机会通过埃及商业新闻的平台向埃及的商业精英和投资者传递最新的…
阅读更多...
ACM Proceedings Template 使用方法

ACM Proceedings Template 使用方法

模板导入 打开ACM Primary Article Template官网&#xff0c;可以看到自带overleaf模板&#xff0c;接下来我们使用overleaf来自动导入模板。 选择你需要的ACM Conference or Journals模板&#xff0c;然后Open as Template 栏目说明 接下来依次解释一下左边栏目的作用 …
阅读更多...
mail发送调用接口如何与三方服务无缝对接？

mail发送调用接口如何与三方服务无缝对接？

mail发送调用接口的性能怎么样&#xff1f;调用邮件接口的技巧&#xff1f; 为了提高效率和自动化水平&#xff0c;企业通常会选择使用mail发送调用接口。然而&#xff0c;仅仅使用这些接口还不够&#xff0c;如何与各种第三方服务无缝对接同样至关重要。AokSend将探讨如何有效…
阅读更多...
再创佳绩丨达梦数据库一体机荣获2024数字中国创新大赛·信创赛道总决赛一等奖

再创佳绩丨达梦数据库一体机荣获2024数字中国创新大赛·信创赛道总决赛一等奖

5月24日&#xff0c;第七届数字中国建设峰会在福州盛大开幕&#xff0c;峰会内容安排包含开幕式、主论坛、分论坛、数字中国创新大赛、现场体验区及成果发布和专业工作会议等。武汉达梦数据库股份有限公司(以下简称达梦数据)受邀参加并在展、会、赛等多个环节深度参与。达梦全栈…
阅读更多...
mac M3芯片 goland 2022.1 断点调试失败(frames are not available)问题，亲测有效

mac M3芯片 goland 2022.1 断点调试失败(frames are not available)问题，亲测有效

遇到如上问题&#xff0c;解法 步骤1&#xff1a;下载dlv文件 执行 go install github.com/go-delve/delve/cmd/dlvlatest 然后在 $GOPATH/bin里发现多了一个dlv文件 (找不到gopath? 执行 go env 可以看到) 步骤2&#xff1a;配置dlv 将这个dlv文件移到 /Applications/G…
阅读更多...
vue中在mounted使用$refs获取不到DOM元素

vue中在mounted使用$refs获取不到DOM元素

vue中在mounted使用$refs获取不到DOM元素 前言解决方案1、通过使用$nextTick来获取2、updated中获取 前言 在使用ref的时候&#xff0c;在mounted中通过$ref获取节点是获取不到报undefined this.$refs.xx 为 undefined 解决方案 在mounted钩子中加载回来的数据不会在这个阶段更…
阅读更多...
webpack5_相关知识点

webpack5_相关知识点

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) &#xff0c;是前端资源模块化管理和打包工具&#xff0c; 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离&#xff0c;等到实际需要时…
阅读更多...
Python 读取.shp文件并生成图幅编号

Python 读取.shp文件并生成图幅编号

代码适用于需要处理和分析地理空间数据的场景&#xff0c;如城市规划、环境监测或自然资源管理&#xff0c;其中它可以帮助用户读取特定区域的Shapefile文件&#xff0c;确定其地理边界&#xff0c;并基于这些边界计算出按照经纬度5度间隔的图幅编号&#xff0c;进而用于地图制…
阅读更多...
Hive环境搭建

Hive环境搭建

1 安装Hive 下载文件 # wget -P /opt/ https://mirrors.huaweicloud.com/apache/hive/hive-2.3.8/apache-hive-2.3.8-bin.tar.gz 解压缩 # tar -zxvf /opt/apache-hive-2.3.8-bin.tar.gz -C /opt/ 修改hive文件夹名字 # mv /opt/apache-hive-2.3.8-bin /opt/hive 配置环境变量 …
阅读更多...
力扣HOT100 - 138. 随机链表的复制

力扣HOT100 - 138. 随机链表的复制

解题思路&#xff1a; class Solution {public Node copyRandomList(Node head) {if(headnull) return null;Node p head;//第一步&#xff0c;在每个原节点后面创建一个新节点//1->1->2->2->3->3while(p!null) {Node newNode new Node(p.val);newNode.next …
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站