vue3+ts+vite+electron electron-builder等文件打包参数配置说明

已于 2024-04-29 16:17:01 修改
阅读量435 收藏
点赞数
分类专栏： vue3+ts+组件使用以及使用git时遇到的问题 文章标签： electron javascript vue.js 前端 rust
于 2024-04-29 16:16:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Missxu1895/article/details/138303402
版权
本文总结了使用Electron、Vue3、TypeScript和Vite构建客户端应用时的打包配置问题。重点讨论了`electron.vite.config.ts`、`electron-builder.yml`和`electron-builder.json`中的配置项，如`extraResources`用于添加额外资源，`nsis`的`perUser`和`perMachine`选项决定安装权限。详细参数配置参考链接提供。
摘要由CSDN通过智能技术生成

前提：

要做一个客户端，使用的就是electron，逃不过的就是配置参数和打包问题。每次配置设置的不一样打包都会出现不同的问题，所以在这里总结了一下打包的配置问题以及使用electron需要的几个主要文件的配置详解。

配置文件设置：

第一步要提前安装好electron、electron-builder、electron-vite。

npm install electron electron-builder electron-vite -D

其余页面上需要的比如electron-icon-builder、electron-reload、electron-updater、@electron-toolkit/utils也可可以提前安装好

npm install electron-icon
了解本专栏 订阅专栏 解锁全文 超级会员免费看
是小许同学吖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Electron+Vue3整合-开发时整合-全部ts开发 + 一条命令启动vue3和electron两个服务
northcastle的博客
04-21 896
vue3 + electron 整合，全部使用 typescript 开发，配置一条命令同时启动vue3 和 electron 两个服务
vue3+electron+typescript 项目安装、打包、多平台踩坑记录
东扯葫芦西扯瓜——前端小菜鸟的博客
05-26 1418
vue3+electron+typscript 项目搭建、平台兼容踩坑（win7 32)
探索 Electron：如何利用Electron和Vite打造高效桌面应用
最新发布
ztK63LrD的博客
07-21 2399
Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。
vue3+ts+vite+electron打包exe
呆萌小新@渊洁的博客
06-16 2534
该种方式十分简便.缺点是必须用vue开发完才能打包客户端.无法实时查看客户端样式。
将web项目打包成electron桌面端教程（二）vue3+vite+ts
i-cat的博客
06-07 1281
vue3打包electron，登录成功但页面无法跳转，原因是不能用cookie!!!
Vite+Vue3+TS+Electron构建桌面应用
weixin_30230009的博客
04-03 4182
前言之前开发项目遇到前端的需求，我通常会选择Vue2，无他，只是在众多前端框架中，我比较熟悉Vue2，此前尝试学过一段时间React，被它的Hook恶心到了，会了又学，学了又忘，所以还是回到Vue的怀抱，至于React，日后再挑战。本篇文章使用当前最新的前端技术体系来构建一个桌面应用，本篇只是记录项目搭建的过程并实现项目的打包与安装，先看效果图：image.png我们使用...
vite+vue3+ts+electron构建
LLDXFXL的博客
09-25 131
1、修改package.json中的type：从modules改为commonJs，或者直接去掉type。npm create vite@latest 文件夹名称（这一步就可以选择ts）npm install nodemon -D //监控代码变化、重启服务器。npm start //运行electron。在package.json第一层配置main。npm run dev //运行vue。就完成一个窗口中的vue3项目构建了。根目录下新建main.js。scripts中配置。2、 用import。
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
2. **配置打包**：在`package.json`中配置`electron-builder`，指定输出目录、平台、应用信息等。 3. **集成electron-updater**：在主进程（main process）中引入`electron-updater`，并监听更新事件。 4. **检测...
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了，想试试新功能 ...
electron+vite+vue3+sqlite3基础框架
12-14
总结起来，"electron+vite+vue3+sqlite3基础框架"是一个为开发桌面应用提供便利的工具集合，它结合了现代前端的最佳实践，为开发者创造了一个高效、易用的开发环境。无论是对于新手还是经验丰富的开发者，这个框架都...
Electron+Vue3+Vite+ElectronForge整合-全部ts开发 - 一键启动两个服务 & 一键打包两个服务
northcastle的博客
05-01 2071
electron+vue3+vite+electron-forge+ts 全流程开发 & 打包 步骤介绍
vite+ vue3项目添加electron，并electron打包教程，以及electron代码热重载页面
L_15737525552的博客
07-23 4989
4.其中的env是阀门方便打包成app，开发中热更新就使用env=pro就好了，因为监听的是8888端口，所以我们需要去更改vue的运行端口，在根目录vite.config.js中加入以下代码。现在启动程序npm run electrone:dev会得到一片空白，展示如下页面，因为现在监听的是vue打包后的dist文件夹中的index.html。只在开发环境中使用，并且不会在生产环境中被打包到应用程序中。应该只在开发环境中使用，而不是在生产环境中使用。3.在package.json中新增打包命令。
现有的vue3+ts+vite项目集成electron
rotating_windmill
08-15 924
Electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。需要将其转换成Electron项目，只需要在原来web项目上安装Electron依赖并进行配置即可。接下来在vite.config.ts中配置vite-plugin-electron插件。接下来在web的public中添加一个256*256的icon图标。在web项目的package中添加script。在web项目的package中添加build。在web项目的package中添加入口。
vue3 打包文件名固定 加版本后缀
梦翼横空的专栏
10-09 1438
这种情况下，上线的时候除非把原来的文件都删除掉，否则文件会一直增加，这样会增大存储压力，将文件名固定就不会出现这种问题，将文件命名改为。vue打包之后文件名类型于“
electron+vite+vue+ts项目搭建(一)-基础环境
wz121341的博客
08-16 806
配置后 dev启动应用，就不需要启动 Electron + Vite 了。appId、productName…mac win —— mac windw 相关配置。输出文件默认目录 release下exe文件进行安装。directories —— 输出路径。nsis —— 桌面应用程序安装过程的配置。npm run dev运行项目。npm run dev 显示。
vue3 ts vite electron开发桌面程序
aGreetSmile的博客
07-19 611
根目录创建plugins文件夹，文件夹中创建ts文件，vite.electron.build.ts是打包文件代码，vite.electron.dev.ts是开发环境代码。在tsconfig.node.json添加plugins文件夹下ts文件的提示。vite.config.ts导入文件，添加base:'./'vite.electron.build.ts代码。在src目录下创建background.ts文件。vite.electron.dev.ts代码。# 一定要安装成开发依赖。
使用 electron-vite-vue 构建 electron + vue3 项目并打包
qq_45897239的博客
05-06 2823
执行打包命令后，控制台将会出现压缩包的下载地址，此时复制下载地址至浏览器进行下载，并将文件放至指定路径即可解决无法下载或下载速度慢的问题。执行后将会下载多个文件，确保杀毒软件(如：火绒)、防火墙没有拦截相关下载请求。后续查找相关资料，总结网友分享的经验，推测问题大概出在镜像源，尝试修改。注：如果命令行方式无效，可尝试方法一中的手动方式修改。安装依赖时报错 (operation not permitted)
Vite + Vue3 + Electron 创建打包桌面程序、实现进程通信
热门推荐
Lyrelion的博客
12-10 1万+
Vite + Vue3 + Electron 创建打包桌面程序、实现进程通信
vite+vue3+ts 的项目增加electron打包成exe
05-19
将 Vite + Vue3 + TypeScript 项目打包成 Electron 应用程序需要进行以下步骤： 1. 安装 Electron：使用 npm 安装 Electron，可以通过以下命令进行安装： ``` npm install electron --save-dev ``` 2. 创建主进程文件：在根目录下创建一个名为 `electron.js` 的文件，并在其中编写 Electron 的主进程代码。 3. 修改 `package.json` 文件：将 `main` 属性的值设置为 `electron.js` 文件的路径，如下所示： ``` { "name": "your-app", "version": "0.0.1", "main": "electron.js", ... } ``` 4. 构建应用程序：在命令行中运行以下命令，将 Vite + Vue3 + TypeScript 项目构建成可在 Electron 中运行的应用程序。 ``` npm run build ``` 5. 打包应用程序：使用 Electron Builder 打包应用程序，可以使用以下命令进行安装： ``` npm install electron-builder --save-dev ``` 然后，在 `package.json` 文件中添加以下代码： ``` { "build": { "appId": "your.app.id", "productName": "Your App Name", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "electron.js", "node_modules/**/*" ], "extraFiles": [ "assets/**/*" ], "mac": { "category": "your.app.category.type" }, "win": { "target": "nsis" } } } ``` 6. 打包应用程序：在命令行中运行以下命令，将 Vite + Vue3 + TypeScript 项目打包成可执行文件。 ``` npm run electron:build ``` 以上步骤是将 Vite + Vue3 + TypeScript 项目打包成 Electron 应用程序的基本步骤。根据自己的实际需求，可以进行一些额外的配置和修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是小许同学吖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值