现有的vue3+ts+vite项目集成electron

置顶 已于 2023-08-15 15:12:57 修改
阅读量1.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 技术 文章标签： electron javascript 前端
于 2023-08-15 14:54:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rotating_windmill/article/details/132297816
本文介绍了如何将一个现有的Vue3、TypeScript和Vite项目集成到Electron框架中，详细讲解了从安装依赖、配置入口文件、设置tsconfig到添加Electron主文件和图标，以及打包过程的每一步操作。

效果图

在这里插入图片描述

什么时Electron

Electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。 Electron兼容Mac、Windows和Linux，可以构建出三个平台的应用程序。

现有的vue3项目集成Electron

安装依赖

原来有一个vue3+ts+vite+pnpm的项目，其中sub-modules是子项目，web是主入口项目，项目结构如下：
在这里插入图片描述
需要将其转换成Electron项目，只需要在原来web项目上安装Electron依赖并进行配置即可。

在安装依赖前我们需要先设置下pnpm的源，如下：

pnpm config  set
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Electron + Vue3 + Vite + TS 构建桌面应用
读心悦
08-03 3503
作为一个开发者，我们总是希望，执行构建命令后，可以快速打包或者启动本地应用，且通过更少的配置，来完成开发体验。1、在应用的根目录创建electron-main和electron-preload目录，其中electron-main是存放主进程的文件，比如：index.ts；2、下载安装electron、已经electron相关的依赖，比如electron-builder。因此我体验一下vite、vue3和Electron的组合，看看能够带来什么样的体验。现在的vite已经得到广泛的应用。
vue3+ts+vite+electron electron-builder等文件打包参数配置说明
Missxu1895的博客
04-29 1399
前端vue3+ts+vite+electron 打包electron-builder.json、electron-builder.yml等配置文件参数说明
Electron+Vite+Vue3+Ts项目搭建
qq_24724153的博客
02-17 1004
根据自己习惯选择TypeScript 或 JavaScript 教程默认选择TypeScript。显示这样 vue 项目搭建完成了，打开vscode或者webstrom 进行以下命令。my-element-plus-app 自定义项目名称。页面展示这样 Vite+Vue3+Ts 安装完成了。再package.json 文件添加以下。如出现以下错误，请关闭相关杀毒软件。展示选择的源代表切换成功。显示以上图片代表已安装成功。或直接执行命令也是可以的。
vue3-electron-vite-ts:使用了vue3、electron、vite、ts
05-08
Vite电子生成器模板 Vite +电子= :fire: 这是用于电子应用的安全模板。 遵循最新的安全要求，建议和最佳实践编写。 引擎盖下使用了超级快，下一代捆绑用于编译的。 默认情况下，该接口使用Vue框架，但是您可以轻松使用任何其他框架，例如React ， Preact ， Angular ， Svelte或其他任何框架。 Vite与框架无关 支持 此模板由维护。 你可以 继续开发此模板。 如果您有想法，问题或建议-欢迎进行。 :smiling_face_with_smiling_eyes: 特征 电子 模板使用具有所有最新安全补丁程序的最新电子版本。 应用程序的体系结构是根据安全建设和最佳实践。 的最新版本用于编译应用程序。 恶毒 Vite用于捆绑所有源代码。 这是一款非常快速的打包机，具有许多强大的功能。 您可以在此视频中了解有关其安排的更多信息。 Vite支持读取.env文件。 我的模板有一个单独的命令来生成带有类型定义您的
vite+vue3+ts+electron构建
LLDXFXL的博客
09-25 214
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 + ts + vue3 + vite 项目搭建
mo911108的博客
06-29 7396
1.新建一个vite + ts + vue3的项目在创建选项中选择ts和vue选项。之后，安装依赖之后试运行一下，出现一下页面意味着vite-vue项目创建成功。2.安装electron的相关依赖3.配置electron注意避坑：preload.ts不要与preload-main中的index.ts同名，
Electron+vite+vue3+ts+pinia+sqlite项目开发框架及案例
最新发布
06-30
Electron、Vite、Vue 3、TypeScript (TS)、Pinia 和 SQLite 是当前流行的前端开发技术和工具。下面将围绕这些技术展开详细的知识点介绍。 1. Electron是一个使用Web技术（HTML、CSS和JavaScript）构建跨平台的桌面...
vue3+ts+vite+electron+electron-store+electron-builder打包可安装包
flhhly的博客
08-29 901
新增main.js、preload.js。
electron+vite+vue3+sqlite3基础框架
12-14
总结起来，"electron+vite+vue3+sqlite3基础框架"是一个为开发桌面应用提供便利的工具集合，它结合了现代前端的最佳实践，为开发者创造了一个高效、易用的开发环境。无论是对于新手还是经验丰富的开发者，这个框架都...
vue3+ts+vite+electron打包exe
欢迎来到烟火气知识小天地！这里记录生活、工作中的 “小麻烦”，从软件故障到生活难题，我会毫无保留分享解决思路与方法，愿成为你排忧解难时的温暖参考，伴你在解决问题路上稳步前行。
06-16 3373
该种方式十分简便.缺点是必须用vue开发完才能打包客户端.无法实时查看客户端样式。
vue3 ts vite electron开发桌面程序
aGreetSmile的博客
07-19 980
根目录创建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 和 electron-builder 到现有 Vite 项目
涟绮的博客
01-28 3355
Electron 安装时，会访问 Github 下载对应的 Electron 包，但是由于一些众所周知的原因，国内访问 Github 会比较困难，故需要。字段是 electron-builder 配置的核心，该字段被用来自定义构建过程和结果，例如：包名、图标、输出平台设置等，这是一个基本的。除了 package.json 文件包含的必要字段之外，为使用 Electron，package.json 文件还必须包含。：指定了构建的应用的名称，该名称将用于安装过程中和生成的安装文件。字段来为应用提供描述信息。
Electron + ts + vue3 + vite
weixin_73251435的博客
10-10 1353
安装electron的相关依赖：注：安装时终端url要项目名那一层。在npm run dev即可。
Vite+Vue3+TS+Electron构建桌面应用
weixin_30230009的博客
04-03 4586
前言之前开发项目遇到前端的需求，我通常会选择Vue2，无他，只是在众多前端框架中，我比较熟悉Vue2，此前尝试学过一段时间React，被它的Hook恶心到了，会了又学，学了又忘，所以还是回到Vue的怀抱，至于React，日后再挑战。本篇文章使用当前最新的前端技术体系来构建一个桌面应用，本篇只是记录项目搭建的过程并实现项目的打包与安装，先看效果图：image.png我们使用...
基于vue3+vite的web项目改为Electron桌面应用（一）
alicezjlwn的博客
07-16 1446
将基于vue3+vite的web项目改为Electron桌面应用
vite +vue3 + electron项目集成
weixin_47551643的博客
11-23 2462
vite + vue3 + electron 项目集成
vue3+ts+vite+electron+electron-packager打包成exe文件
flhhly的博客
07-25 1196
直接在package.json中添加缺少数据，或者根据缺失依赖逐个添加。vite.config.js中配置修改。根目录下新建preload.js文件。根目录下新建main.js。
Vue3+vite开发Electron
m0_62758542的博客
11-28 1825
Vue3+vite开发Electron
前端使用electron+vue3+ts搭建一个桌面端应用且可以热更新
weixin_50307964的博客
01-13 2974
将以下代码复制到vue.config.js的builderOptions对象中即可provider : "generic" , url : 'https:' , // 打包文件地址,与以上链接需相同 } , ] ,然后再次打包安装测试；没有问题就可以上线了也可以查看线上代码json-tool工具GitHub仓库json-tool工具软件以前的文章electron+vue3+ts开发了一个JSON工具桌面软件javascript求最大值最小值的另一种写法reduce。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

河马开源

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

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

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

打赏作者

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

抵扣说明：

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

余额充值