vue cli3 中快速集成 electron13+

使用Electron构建Vue应用
最新推荐文章于 2025-10-22 08:19:18 发布
原创 最新推荐文章于 2025-10-22 08:19:18 发布 · 428 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这篇博客介绍了如何在Vue项目中集成Electron，通过npm安装依赖，修改package.json配置，并创建main.js文件来启动和配置Electron应用，实现桌面应用的开发。

1.首先在vue项目中下载electron 依赖 

npm install --save-dev electron

2.修改package.js中的配置项目

（1）增加main：“main.js”

（2）增加调试脚本

3.根目录新建main.js文件 同时添加electron中mian.js对应的内容，修改加载文件的目录

 

vue3项目集成electron
cyj0919的博客
04-10 557
使用 `contextIsolation` 和 `preload` 脚本安全地暴露 API。执行后会在 `src` 目录下生成 `background.js` 主进程文件。避免直接使用 `nodeIntegration: true`1. 确保已安装 Node.js (建议版本 16.x 或更高)- 开发时使用 `Chrome DevTools`可根据需要更改background.js 主进程文件。- 处理平台特定的菜单和快捷键。- 为不同平台提供适当的图标。- 生产环境添加日志系统。
vue-cli3+electron构建项目打包踩坑记
qq_41538952的博客
09-01 710
构建项目的过程就不说了,网上一大堆,一搜一大把,主要是讲一下在当前环境下使用electron-builder打包的问题； package.json配置如下： 如图,electron/electron-builder/webpack等都是最新盘本,electron打包是有一个默认安装路径的,并且在不加任何配置的情况下,是直接安装在默认路径下的;目前项目需求打包之后让用户能够自己选择安装路径的;解决过程如下： 1.查看electron官方说明：如下 大概的意思是我们需要配置nsis这一关键项,a
vue3集成electron
zjun1001的博客
10-13 2061
结束vue3如何集成electron，如何打包部署
用vue-cli3+Electron开发一个跨平台的桌面应用（这里只是搭建了项目）
01-08
## 1. 安装vue-cli3（这里使用的是yarn，进行这一步的前提是安装好node和yarn） yarn global add @vue/cli vue --version （此命令意在查看vue的版本，可确认是否安装成功，） ## 2. 创建vue项目 vue create vue-electron-demo （vue-electron-demo是你要创建的项目名称） ##3 . 创建vue项目过程，选常用模块以及配置 此时需要选择项目的一些配置，选定敲回车，出现的顺序以及基本选择如下：（上下键，空格是选择，enter是确定） ? Please pick a preset:
​​Electron 教程：从背景到 Vue3 桌面应用开发​
最新发布
Rysxt_的博客
10-22 1131
​ 构建 UI，无需学习 C++/Objective-C/Java。Electron 是一个开源框架，由 ​。​ 项目构建），允许开发者使用 ​。​：一套代码可运行在 ​。主进程和渲染进程通过 ​。在 Vue3 组件（如。​ 开发（最初为 ​。
vue-cli3+Electron
hunter_97的博客
04-22 3847
注意：我这里使用的是vuecli3。之前的版本可以参考electron-vue 起步。 一、 创建项目 创建vue项目。 参考我之前的文章vue 之 vue-cli3，创建项目。这里我创建的项目是electron-vue-test。 安装electron,自动安装和手动安装任选其一。 2.1 自动安装，进入到项目根目录，执行：vue add electron-builder，然后选择elec...
vite2+vue3+electron13创建桌面应用
SUN-天旭
05-10 915
1、生成vite2+Vue3框架 npm init @vitejs/app vite-vue-win cd vite-vue-win npm install npm run dev 2、为vue引入electron框架 在项目根目录创建 .npmrc文件，并添加如下内容 electron_mirror=http://cdn.npm.taobao.org/dist/electron/ 3、安装所需的启动及打包模块 npm install electron --save-dev npm i
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
3. **集成electron-updater**：在主进程（main process）中引入`electron-updater`，并监听更新事件。 4. **检测更新**：在应用启动时调用`autoUpdater.checkForUpdates()`来检查是否有可用的更新。 5. **下载更新**...
Vue+Electron（electron-builder + electron-updater + electron-log）
09-06
使用Vue+Electron（electron-builder + electron-updater + electron-log）实现桌面应用程序的开发，面向所有electron使用者学习使用，内部源码都有注释。可参考文章（http://t.csdn.cn/BLM6Y）使用。
vue2+elementui+electron项目配置
06-06
接下来，为了集成Electron，你需要安装`electron`和`electron-builder`。`electron-builder`用于构建和打包应用程序。在项目中执行以下命令： ```bash npm install electron --save-dev npm install electron-...
Electron学习记录（二）-在Electron中使用vue3
sinat_37066308的博客
04-23 6544
本质就是用vue写前端页面，然后用Electron套壳，通过window传递消息，实现前端和node之间的通信。
electron-vuecli:vue cli3创建的电子模板
04-14
电子威克里 vue cli3创建的电子模板 "serve": "vue-cli-service serve --https", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "make": "electron-forge make", "package": "electron-forge package", "publish": "electron-forge publish", "start": "electron-forge start"
cli3 + electron-updater 自动升级dome
renlang7090的博客
05-14 1056
1、cli3创建项目 2、添加vue-cli-plugin-electron-builder、electron-updaterpackage.json配置build下publish参数如下： 3、主进程添加代码background.js // 检测更新 !function updateHandle() { let message = { error: {...
桌面端开发记录，electron13+
longxiaobai_WJ的博客
03-24 207
桌面端开发记录，electron13+
Electron 4 开发跨平台桌面应用
koukou的博客
11-07 683
Electron是一个基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，再加上Web开发的低成本、高效率的优势，这种方式越来越受到开发者的喜爱。 本文一步一步教你如何使用Electron5和vue-cli3，在完全保留vue开发web
vite+ vue3项目添加electron，并electron打包教程，以及electron代码热重载页面
热门推荐
L_15737525552的博客
07-23 1万+
4.其中的env是阀门方便打包成app，开发中热更新就使用env=pro就好了，因为监听的是8888端口，所以我们需要去更改vue的运行端口，在根目录vite.config.js中加入以下代码。现在启动程序npm run electrone:dev会得到一片空白，展示如下页面，因为现在监听的是vue打包后的dist文件夹中的index.html。只在开发环境中使用，并且不会在生产环境中被打包到应用程序中。应该只在开发环境中使用，而不是在生产环境中使用。3.在package.json中新增打包命令。
向vue中集成electron（使用electron-builder插件直接将electron集成到自己的项目）
qq_45787691的博客
09-01 6116
使用 vue add electron-builder将electron直接集成到vue项目中。
vue-cli项目中使用Electron
weixin_40398599的博客
01-11 3549
在vue-cli项目中使用electron的方法
Electron与Vue CLI3结合的基础开发与实践指南
electron-vue-cli3是一个集成了Electron和Vue CLI 3的项目模板。它展示了如何使用Vue CLI 3来搭建前端界面，并通过Electron将该界面打包成桌面应用。开发者可以通过这个示例快速开始使用Electron和Vue.js构建自己的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值