vue2结合electron开发桌面端应用

已于 2024-03-03 14:33:39 修改
阅读量2k 收藏 12
点赞数 15
CC 4.0 BY-SA版权
分类专栏： 桌面端 Electron vue 文章标签： electron javascript 前端
于 2024-03-02 12:34:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37312180/article/details/136375902
这篇博客介绍了如何使用Vue2和Electron构建跨平台桌面应用，包括遇到的npm淘宝镜像过期、Electron安装失败、electron-builder报错等问题，以及解决这些问题的详细步骤。涉及的解决方案包括更换npm仓库、设置Electron镜像、调整npm配置、处理electron-builder构建错误等。

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

一、Electron是什么？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 。允许您保持一个 JavaScript 代码代码库并创建可在Windows、macOS和Linux上运行的跨平台应用 。

Electron提供了丰富的本地（操作系统）API，使你能够使用纯JavaScript来创建桌面应用程序。Electron通过集成浏览器内核，使用Web技术来实现不同平台下的渲染，并结合了 Chromium 、Node.js 和用于调用系统本地功能的Native API 三大板块。

Electron 经常与 Chromium 一起发布主版本。 本文档侧重于发布排期和版本支持政策。 要更深入地了解我们的git 分支和Electron如何使用语义版本， 请查看我们的 

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue2结合electron开发跨平台应用(桌面端应用)
qq_37312180的博客
03-03 2742
vue2结合electron开发跨平台应用(桌面端应用)
vue2+electron桌面端一体机应用
xiaoxian_xian的博客
12-04 1650
公司有一个项目需要用Vue转成exe，首先我使用vue-cli脚手架搭建vue2项目，然后安装electron。
在vue2.0 项目中集成 Electron 实现桌面端应用
weixin_45341912的博客
07-19 2037
在当前项目中安装electron相关工具。
electron打包vue2项目流程
最新发布
f1234_5678910的博客
05-12 255
3、进入到项目目录：cd electron-demo 进入项目目录 然后通过add electron。4、修改你的c盘下面的.npmrc（修改镜像添加如下代码）安装过程中，此处选择13.0.0按回车。1、安装一个node+vue2的项目。2、安装electron。
vue2使用electron以及打包配置
m0_63701303的博客
01-15 3251
vue2使用electron以及打包配置
Vue2项目-Elctron构建桌面应用程序
StupidlyGrass的博客
10-19 1396
注：window.require("electron")，引入electron后，浏览器无法访问项目，可以添加兼容判断，让浏览器也可以访问。electron-v13.0.0-win32-x64.zip // 64位。包名：nsis-resources-3.4.1/nsis-resources-3.4.1.7z。包名：electron-v13.0.0-win32-ia32.zip // 32位。包名：winCodeSign-2.6.0/winCodeSign-2.6.0.7z。④ 创建App.vue。
Vue2项目中使用electron打包Windows桌面应用（全教程、踩坑集合）
qq_44928780的博客
05-19 6612
PS：踩了太多坑 亲测有效。。
vue2+electron 给大家说个相声
m0_70769052的博客
12-21 1383
这里就体现了background.js文件的作用了那我们浅浅看一下里面都是些啥这两张图都干了些什么呢？？是不是从electron引入了一些模块，来我们挑重点。
electron+vue3实现桌面端应用开发
08-18
Electron通过结合Chromium（用于渲染Web页面）和Node.js（提供后端功能）来创建桌面应用，使得前端开发者能够利用他们已有的Web技能进行桌面应用开发。Vue3作为视图层框架，提供了组件化、响应式数据绑定和丰富的...
electron-vue开发桌面应用界面模板
11-01
标题中的“electron-vue开发桌面应用界面模板”指的是利用Electron和Vue.js框架构建的桌面应用程序的用户界面模板。Electron是一个用JavaScript、HTML和CSS构建跨平台桌面应用的开源库，它允许开发者使用Web技术来...
electron+vue桌面应用开发快速开始模板.zip
02-09
在电子技术领域， Electron 和 Vue.js 的结合提供了一种高效且强大的方式来开发跨平台的桌面应用程序。"electron+vue桌面应用开发快速开始模板.zip" 是一个为开发者准备的资源包，它帮助初学者迅速搭建基于 Electron...
vue2+elementui+electron项目配置
06-06
vue2+elementui+electron项目配置
【electron + vue2】构建桌面端、打包。
2301_76692187的博客
10-29 4979
Electron 是一个使用 JavaScript, HTML 和 CSS 构建跨平台桌面应用程序的开源库。能够运行在 Windows、macOS 和 Linux 上。集成现代Web API：可以访问现代 Web API，如地理位置、通知等。复杂界面设计：利用 HTML 和 CSS 的强大功能，可以创建复杂的用户界面。插件和扩展：可以集成第三方插件和扩展，增强应用功能。像流行的【微软开发的免费、开源的代码编辑器。微软的团队协作平台。Notion】一个组织笔记、任务和项目的协作工具。
vue2项目使用electron
qq_43494078的博客
02-28 1295
vue2项目使用electron
在 Vue2 中使用 Vue-Electron
qq_40602449的博客
04-19 1205
在 Vue2 中使用 Vue-Electron 需要安装。文件夹下创建两个文件。
运维随录实战（11）之将vue2项目制作成桌面应用程序
thinkers
03-09 854
注意node的版本，我的项目用的10.16.0，执行完后会看到生成的dist目录文件 npm run build。4，将dist目录文件整个拷贝到上面创建的electron项目中，然后通过electron forget打包。注：dmg文件需要使用macos电脑才能生成，windows生成不了。注意 node和npm版本关系，可以使用nvm包管理工具。3，将自己的项目先进行打包，生成dist目录文件。2，创建专门用来打包的electron项目。执行打包命令：npm run make。
vue2（webpack）集成electron和 electron 打包
weixin_44646763的博客
04-04 566
vue2（webpack）集成electron和 electron 打包。之前发过一篇vue集成electron的文章，但是用vue3+vite实现的，在vue2+webpack工程可能不适用，所以这篇文章就主要介绍vue2+webpack集成electron方法。
若依框架前端vue2 + Electron
qq_33316606的博客
02-26 917
若依vue2使用Electron打包exe
vue2.x+electron创建桌面程序
http://xueshuai.top
05-25 3446
首先搭建vue2.x项目 搭建完成之后可以通过浏览器 http://localhost:8080/ 访问 然后在根目录下配置 vue.config.js 来解决打包静态资源页面空白 module.exports = { publicPath: "./",//配置静态资源 } 然后在根目录下安装 electron //官网提供 npm i --save-dev electron //由于上面是通过国外安装，可能会报错，出现报错可以试试国内镜像 cnpm i --save-dev e
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

vitenode

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

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

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

打赏作者

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

抵扣说明：

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

余额充值