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

置顶 已于 2023-08-15 15:12:57 修改
阅读量1.3k 收藏 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主文件和图标，以及打包过程的每一步操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图

在这里插入图片描述

什么时Electron

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

现有的vue3项目集成Electron

安装依赖

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

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

pnpm
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Electron + Vue3 + Vite + TS 构建桌面应用
读心悦
08-03 3279
作为一个开发者，我们总是希望，执行构建命令后，可以快速打包或者启动本地应用，且通过更少的配置，来完成开发体验。1、在应用的根目录创建electron-main和electron-preload目录，其中electron-main是存放主进程的文件，比如：index.ts；2、下载安装electron、已经electron相关的依赖，比如electron-builder。因此我体验一下vite、vue3和Electron的组合，看看能够带来什么样的体验。现在的vite已经得到广泛的应用。
vue3+vite+js项目引入electron构建跨平台桌面应用
最新发布
qq_23404533的博客
04-10 654
vue3+vite+js项目引入electron构建跨平台桌面应用
vue3+ts+vite+electron+electron-packager打包成exe文件
flhhly的博客
07-25 918
直接在package.json中添加缺少数据，或者根据缺失依赖逐个添加。vite.config.js中配置修改。根目录下新建preload.js文件。根目录下新建main.js。
Vue3.2 项目打包成 Electron 桌面应用
weixin_61769998的博客
04-07 525
Vue3.2 项目打包成 Electron 桌面应用
Electron+Vite+Vue3+Ts项目搭建
qq_24724153的博客
02-17 784
根据自己习惯选择TypeScript 或 JavaScript 教程默认选择TypeScript。显示这样 vue 项目搭建完成了，打开vscode或者webstrom 进行以下命令。my-element-plus-app 自定义项目名称。页面展示这样 Vite+Vue3+Ts 安装完成了。再package.json 文件添加以下。如出现以下错误，请关闭相关杀毒软件。展示选择的源代表切换成功。显示以上图片代表已安装成功。或直接执行命令也是可以的。
vite+vue3+ts+electron构建
LLDXFXL的博客
09-25 187
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 6978
1.新建一个vite + ts + vue3的项目在创建选项中选择ts和vue选项。之后，安装依赖之后试运行一下，出现一下页面意味着vite-vue项目创建成功。2.安装electron的相关依赖3.配置electron注意避坑：preload.ts不要与preload-main中的index.ts同名，
vue3+ts+vite+electron打包exe
呆萌小新@渊洁的博客
06-16 3162
该种方式十分简便.缺点是必须用vue开发完才能打包客户端.无法实时查看客户端样式。
vue3 ts vite electron开发桌面程序
aGreetSmile的博客
07-19 771
根目录创建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+vue3+sqlite3基础框架
12-14
总结起来，"electron+vite+vue3+sqlite3基础框架"是一个为开发桌面应用提供便利的工具集合，它结合了现代前端的最佳实践，为开发者创造了一个高效、易用的开发环境。无论是对于新手还是经验丰富的开发者，这个框架都...
Electron+Vite+Vue3 模版
05-31
标题 "Electron+Vite+Vue3 模版" 提供了一个关于软件开发的集成环境，它结合了三个强大的技术栈：Electron、Vite 和 Vue3。这个模版是为开发者构建跨平台桌面应用而设计的，允许开发者使用现代前端技术栈的同时，...
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构建桌面应用
weixin_30230009的博客
04-03 4456
前言之前开发项目遇到前端的需求，我通常会选择Vue2，无他，只是在众多前端框架中，我比较熟悉Vue2，此前尝试学过一段时间React，被它的Hook恶心到了，会了又学，学了又忘，所以还是回到Vue的怀抱，至于React，日后再挑战。本篇文章使用当前最新的前端技术体系来构建一个桌面应用，本篇只是记录项目搭建的过程并实现项目的打包与安装，先看效果图：image.png我们使用...
Electron + ts + vue3 + vite
weixin_73251435的博客
10-10 1247
安装electron的相关依赖：注：安装时终端url要项目名那一层。在npm run dev即可。
基于vue3+vite的web项目改为Electron桌面应用（一）
alicezjlwn的博客
07-16 1295
将基于vue3+vite的web项目改为Electron桌面应用
vite +vue3 + electron项目集成
weixin_47551643的博客
11-23 2381
vite + vue3 + electron 项目集成
vue3+ts+vite+electron electron-builder等文件打包参数配置说明
Missxu1895的博客
04-29 1183
前端vue3+ts+vite+electron 打包electron-builder.json、electron-builder.yml等配置文件参数说明
Vue3+vite开发Electron
m0_62758542的博客
11-28 1294
Vue3+vite开发Electron
前端使用electron+vue3+ts搭建一个桌面端应用且可以热更新
weixin_50307964的博客
01-13 2915
将以下代码复制到vue.config.js的builderOptions对象中即可provider : "generic" , url : 'https:' , // 打包文件地址,与以上链接需相同 } , ] ,然后再次打包安装测试；没有问题就可以上线了也可以查看线上代码json-tool工具GitHub仓库json-tool工具软件以前的文章electron+vue3+ts开发了一个JSON工具桌面软件javascript求最大值最小值的另一种写法reduce。
vue3+ts+vite+electron
11-05
Vue3是Vue.js的下一个主要版本，采用了Typescript作为开发语言。Vue3的目标是提高性能、增加开发者友好的API和更好的项目可维护性。它具有更快的渲染速度、更小的打包体积以及更好的类型支持，因此在开发大型项目时非常有用。 Vite是一种用于开发现代Web应用程序的新型构建工具，它专注于开发过程的快速和即时更新。Vite不需要在开发过程中进行打包和编译，而是采用了基于ES模块的开发模式。这意味着您可以享受到非常快的冷启动、热模块替换和快速刷新的开发体验。 Electron是一个用于构建跨平台桌面应用程序的开源工具。它结合了Chromium渲染引擎和Node.js运行时环境，使您可以使用Web技术（HTML、CSS和JavaScript）构建桌面应用程序。Electron具有广泛的社区支持和丰富的插件生态系统，使开发者可以轻松地构建跨平台的桌面应用程序。 结合使用Vue3、Typescript、Vite和Electron，可以获得强大的开发工具和框架。Vue3提供了更好的类型支持，使得编写类型安全的代码变得更加容易。Vite提供了快速的开发体验，而Electron则使您可以将应用程序打包成跨平台的桌面应用程序。这种组合可以帮助开发者更高效地构建现代化、可扩展的桌面应用程序，并提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

河马开源

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

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

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

打赏作者

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

抵扣说明：

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

余额充值