electron +vite + vue实现简单桌面应用

已于 2023-02-07 11:04:25 修改
阅读量408 收藏
点赞数
分类专栏： electron 文章标签： 前端 javascript 开发语言
于 2023-02-07 10:58:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37828987/article/details/128913936
版权
该文指导如何结合Vue、Vite和Electron创建桌面应用。首先从GitHub克隆Electron快速启动项目，然后打包自己的应用为dist包，将其整合到项目中。接着配置`electron-packager`，更新main.js的文件路径，最后运行命令打包生成.exe程序。

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

vue + vite + electron 实现本地桌面应用

1. 上github下载electron示例代码
下载地址： electron-quick-start

打开cmd使用： git clone https://github.com/electron/electron-quick-start

2. 把自己要集成到electron应用去的本地应用打个dist包
示例图片示例图片
3. 使用编辑器打开下载的electron-quick-start工程
4. 先执行npm install，再执行npm run start 启动下工程是否正常
在这里插入图片描述
5. 项目成功启动后，执行 npm install electron-packager --save-dev
6. 找到根目录下package.json文件，添加配置到scripts

"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"

7. 复制第二步准备好的dist文件到工程里面
8. 修改main.js里面加载文件路径指向

mainWindow.loadFile('./dist/index.html')

9. 执行命令 npm run packager
在这里插入图片描述
10. 打包成功后工程里面会多出来一个文件 YOUR_APP_NAME-win32-x64
11. 打开此文件找到.exe启动程序双击打开就可以了

vite + vue2 + electron开发桌面软件
qq_39480297的博客
03-06 581
应用vite + vue2 + electron开发桌面软件。解决webpack + vue + electron-builder运行时，windows内存爆满问题。
Electron + Vite + Vue 项目搭建
无人境界的博客
02-26 3832
本篇文章主要基于 Electron Forge 的 Vite 模板进行 Vue 3 环境的搭建。
electron+vite+vue脚手架
最新发布
大Gery狼.的碎碎念
03-30 243
根据提示创建vite项目，交安装依赖。
Electron + Vite + VUE 开发桌面程序
LHBTM的博客
10-10 1485
electron-vite 是一个新型构建工具，旨在为 Electron 提供更快、更精简的开发体验。它主要由四部分组成： 一套构建指令，它使用 Vite 打包你的代码，并且它能够处理 Electron 的独特环境，包括 Node.js 和浏览器环境。 集中配置主进程、渲染器和预加载脚本的 Vite 配置，并针对 Electron 的独特环境进行预配置。 为渲染器提供快速模块热替换（HMR）支持，为主进程和预加载脚本提供热重载支持，极大地提高了开发效率。 使用 V8 字节码保护源代码。
Electron + Vue + Vite 开发桌面程序
weixin_42367460的博客
04-07 4564
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。VsCode 就是 electron 开发的呢。
electron+vite+vue3 快速入门教程
pixle的博客
01-17 6029
本文将介绍electron基本使用和构建electron+vite+vue3脚手架开发项目electron框架对web开发人员来说非常友好，无须了解原生开发技能，就能通过web技术进行桌面应用开发，大大减少学习成本，一套代码能快速构建生成多端应用，也大幅减少了开发成本。简言之，electron开发可以看成是桌面功能开发+纯web页面开发，桌面功能开发在主进程调用Electron API，而web页面开发就是html，css，js技术栈。
Electron+Vite+Vue3 模版
05-31
开发者可以利用Vue3的新特性构建用户界面，同时享受Vite带来的快速开发体验，最后通过Electron将应用打包为可在Windows、macOS和Linux上运行的桌面程序。 在实际使用这个模版时，开发者可以按照以下步骤进行操作： ...
electron+vite+vue3+sqlite3基础框架
12-14
本项目是一个基于`Electron`的桌面应用程序开发框架，它结合了现代前端开发工具`Vite`和流行的前端框架`Vue.js`的最新版本`Vue3`，以及轻量级的本地数据库系统`SQLite3`。这个基础框架为开发者提供了一个快速启动新...
基于electron+vite+vue3和python flask的文件交互GUI.zip
03-02
基于electron+vite+vue3和python flask的文件交互GUI.zip本项目是一个Electron项目，有一个文件上传接口，可以上传图片到Flask框架的后端，处理完（本项目的处理是去色加水印"myWatermark"）后直接返回前端显示。...
用vue3+elementPlus+vite搭建的electron桌面端应用模板，方便快速创建类似项目.zip
02-09
在本文中，我们将深入探讨如何使用Vue3、ElementPlus和Vite来构建一个基于Electron的桌面应用程序模板，以及这个模板对于快应用开发和企业级项目的实用价值。首先，我们来了解一下这几个关键技术： 1. Vue3：Vue.js...
2024最新版本 electron + vite + sqlite 开发收藏夹程序续一配套代码
01-05
# 2024最新版本 electron + vite + sqlite 开发收藏夹程序 > NPM： > cd your-project > npm install > npm run electron:dev > YARN： > cd your-project > yarn > yarn run electron:dev
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了，想试试新功能 工作中用的 umi+electron 项目大了，启动速度并不理想； 用 vite 试试，算一个储备方案 ^_^ Command npm run dev npm run build 如果只需要最基础的集成 Demo 请使用 或 分支 Note 踩坑记 import { write } from 'fs' 的这种形式会被 vite 编译成 /@modules/fs?import const { write } = require('fs') 这种形式就能用了 :winking_face: const {
electron-vite-quick-start:全栈使用 Vite 运行 Electron 应用程序，包括主进程
07-24
该项目已被收录到。 Electron-vite-快速启动 :high_voltage: 全栈使用 Vite来运行 Electron 应用程序，包括主进程。 :light_bulb: 项目使用管理，因此推荐使用Yarn作为包管理工具。 快速使用 # Clone this repository $ git clone https://github.com/yingpengsha/electron-vite-quick-start.git # Go into the repository $ cd electron-vite-quick-start # Install dependencies $ yarn install # Run the app $ yarn run start 建造 $ yarn run build 去做 执照
vite+vue+electron的创建并使用electron-build打包
m0_73459939的博客
07-28 2080
解决vue打包后electron空白、使用electron-build打包时候出现的失败及打包为exe之后空白的问题。无废话一篇文章实现创建到打包。
【electron-vite】搭建electron+vue3框架基础
我有满天星辰的博客
11-30 4179
electron项目搭建
vue（vite）+electron项目创建打包
2301_80864260的博客
03-13 1335
在package.json中的build字段配置打包，指明名称以及打包到的目录之后就是重点了，files是要打包的内容，首先就是 dist目录，vue打包时会将资源文件copy一份放到dist目录下，直接打包dist目录即可，然后就是main/main.js，这个也要打包进去，然后就是刚封装的 vue的核心部分 renderer 目录下的vue文件。还要检查package.js中是否将代码打包进入了，不需要选资源文件，因为之前将代码都放在了src目录下，只需要将这个目录打包进入即可。
vite+vue3+electron项目搭建详细
llc18230851423的博客
07-20 3059
vue的入口文件是index.html， electron的入口文件是main.js。所以要对入口进行整合。先在项目根目录手动创建一个目录，然后在该目录下创建一个main.js。修改文件指定入口为 electron/main.js，修改 type 为 commonjs，并添加 electron:dev 命令以开发模式运行 Electron。
【vite + vue + Electron 搭建项目】
weixin_44310397的博客
09-06 1051
公司需要做一个桌面程序 但是我们只有web前端 所以尝试使用electron 来做一个桌面程序
electron+vite项目【1】
qq_36393991的博客
01-30 932
electron创建项目
跨平台应用开发：Electron+Vite+Vue3模版指南
结合这三个技术的模版，可以让开发者利用Vite的构建效率，Vue 3的现代化特性和组件化能力，以及Electron的跨平台桌面应用程序打包能力。这样的模版适合那些希望快速搭建桌面应用原型，或者需要将Web应用扩展到桌面...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值