最简单的将已有Vue-cli项目转成Electron桌面应用的库

最新推荐文章于 2025-08-01 13:01:08 发布
原创 最新推荐文章于 2025-08-01 13:01:08 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue-cli3 #electron #elementui

本文介绍了如何利用vue-cli-plugin-electron-builder快速将Vue项目转化为桌面应用。通过创建自定义vue-cli项目，然后添加Electron支持，只需简单几步即可实现桌面应用的Debug和Release版本构建。通过npm run electron:serve启动Debug版本，而npm run electron:build则用于构建Release版本。

0.目的

检验Vue+ElementUI+Electron技术栈使用

这里使用最简单的库vue-cli-plugin-electron-builder（地址见参考文献1），只需2步就可以把原有HTML应用打包成桌面应用

1. 创建自定义vue-cli项目

这里用一个现成的BigeMap提供的Vue工程模板做示例说明，任何vue-cli项目都可以。基础差一点的可以参考另外一篇文章NodeJS+Vue+ElementUI配置

  1. 从官方网站上下载该模板
  2. 解压缩到某文件夹，我的是D:/Code/vuemap
  3. 运行命令vue ui，打开项目管理器后，导入这个项目，编译，调试通过

2.创建Electron工程

新开一个命令行，cd命令到指定的文件夹，执行命令vue add electron-builder，便安装好了该库。

继续执行命令npm run electron:serve便可以看到桌面应用已经编译出来了(相当于Debug版本)
如果需要发布Release版，执行命令npm run electron:build

可以看到桌面应用已经在/dist_electron/win-ia32-unpacked目录下存在了，可以正常运行

参考文献

  1. vue-cli-plugin-electron-builder
将现有Vue项目改为electron桌面端
千里小马哥的博客
07-01 6556
零、前言 之前看了看electron-vue，感觉还是存在一些问题的，比如electon的版本特别特别低，不能忍受。且如果你是用vue搭建的项目，最后希望能够打包成桌面端，其实很简单。 一、基本步骤 （1）创建vue项目、并进行开发 vue create vueDemo （2）突然一天我想打包成桌面程序了 // 进入项目目录 cd vueDemo // 添加electron相关库 vue add electron-builder 这时，他也会自动下载electron。 问题处理：如.
Electron与Vue结合开发桌面应用的架构设计与实践
最新发布
binbin_youyou的博客
10-08 2070
electron与vue结合开发桌面应用的架构设计，electron+vue分离架构设计
已有vue cli项目改成electron
summer942zjb的博客
07-23 397
安装依赖 # npm安装不了的话 换cnpm试一下 npm i -D vue-cli-plugin-electron-builder electron package.json中加入图中红框部分代码 // src/background.js 这个是electron的入口文件 const { app, BrowserWindow } = require('electron') const isProd = process.env.NODE_ENV !== 'development' con.
vue项目打包成electron桌面端exe应用（0-1保姆级教程）
qq_52132550的博客
07-15 7098
vue项目打包成桌面端exe应用（0-1保姆级教程）
2024年最全webstorm的安装及基本配置，2024最新物联网嵌入式开发高频精选面试题分享
2401_85015025的博客
05-14 715
择“License server”,然后在输入框中输入 License server address 为：http://hb5.s.osidea.cc:1017（有可能不能用，自己可以百度搜一下最新的）点击”Activate”按钮。人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**各种配置 可以根据自己的需求自行配置。7、开始基本配置 主要在。
如何将一个现有的Vue网页项目封装成electron桌面应用（转载）
Solomwn的博客
08-24 1866
简介 需求缘由 基础 步骤 总结 参考内容 需求缘由 开发了很久的网页项目，领导突然想变成桌面应用，又要重写代码？no，no，no。不可能的。重写代码吃力不讨好，浪费时间，浪费精力。那么我们该怎么办呢？ 幸好，electron是如此神奇，它提供了一种能让你将任何前端代码的网站页面封装成桌面应用。无论是vue，react 还是 angular等现有的框架都能实现。 基础 学习该内容需要基本的 javascript 语法基础，以及 node.js 基础。 步骤 1，安装electron依赖包（局部安装，只安装开
Electron+vue-cli4开发跨平台桌面应用详细流程
weixin_44714325的博客
01-25 1150
Electron是一个基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，再加上Web开发的低成本、高效率的优势，这种方式越来越受到开发者的喜爱。 本文一步一步教你如何使用Electron5和vue-cli3，在完全保留vue开发web
从零开始使用Electron13+vue-cli3开发跨平台桌面应用(0)
solar_Lan的博客
09-23 2081
Electron是一个基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，再加上Web开发的低成本、高效率的优势，这种方式越来越受到开发者的喜爱。 本文一步一步教你如何使用Electron5和vue-cli3，在完全保留vue开发we
Electron桌面应用打包现有的vue项目
15年老码农，开源项目启航电商erp系统作者。
10-02 1727
如果您想打包成可执行文件，可以使用 Electron Builder 或 Electron Packager。Electron 中启动一个内置的 Node.js Web 服务器来渲染用 Vue.js 编写的页面，可以使用。确保在启动 Electron 应用之前，您已经构建了 Vue 应用（例如运行。方案二：手动下载electron对应的版本包，放在。在您的项目中创建一个新的文件，例如。文件夹，包含生产环境的静态文件。在主进程中，启动该服务器，并在。(直接将zip压缩包放进去)
Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用
2401_85124821的博客
05-27 1356
electron:serve”: “concurrently -k “npm run dev” “npm run electron”” //新增更新2。“appId”: “com.dweb.demo”, //包id com.dweb.项目名。“appId”: “com.dweb.demo”, //包id com.dweb.项目名。“appId”: “com.dweb.demo”, //包id com.dweb.项目名。// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。
基于Electron的桌面端应用开发和实践
逸尘的专栏
12-06 9032
先简单介绍一下electron。electron是由Github开发的开源框架，现在由OpenJS基金会维护的一个开源项目。它允许开发者使用 HTML、CSS 和 JavaScript 来构建跨平台的桌面应用，而且构建出来的应用，可以很好地兼容 Mac、Windows 和 Linux 这些主流的操作系统。
2024年echarts饼图如何去掉指示线指示文字_echarts饼图去掉标签，面试必备
2401_85012069的博客
05-14 1924
legend: {data: []},series : [name: ‘访问来源’,label: {normal: {},data:[{value:335, name:‘直接访问’},{value:310, name:‘邮件营销’},{value:234, name:‘联盟广告’},{value:135, name:‘视频广告’},{value:1548, name:‘搜索引擎’}],},
第一篇 vue项目web端如何转桌面端（electron）
qq_42647677的博客
02-18 1844
需要把现有的web端项目转成桌面端，原项目框架是vue,桌面端需要适配windows和麒麟系统，经过技术调研，选择electron做为桌面端框架，以下不以具体项目来说，从使用vue2搭建项目开始，然后转成桌面端附上官网链接：Electron框架 Electron中文网 官网。
VUE项目转Electron心得
Sky_xinkong的博客
10-11 1047
4、修改路由配置，将vue-router模式更改为 hash，并修改导航渲染路径；在eletron中，导航经过path处理后，会返回文件绝对路径，需修改为相对路径；进到对应目录，修改文件名，把下划线去掉。3、修改VUE项目使用的js-cookie插件，修改为localStorage或者sessionStorage；2、集成成功后src下生成background.js文件，根据需求修改src/background.js文件。5、修改生产环境配置文件，请求地址更改为完整路径；插件来集成 Electron；
如何将一个vue项目集成到electron框架中
Yw2026的博客
05-29 2185
5、 打开我们的electron文件，找到其中的frontend文件，将我们的压缩包移动到electron文件中，并改名为frontend，解压缩，替换掉frontend文件，如下图。1、electron是一个桌面应用程序的框架，可以将vue项目集成为一个桌面应用程序。压缩的目的是为了更好的将项目文件复制到我们的electron框架中。这样我们的frontend文件中就装着我们的vue项目文件了。6、打开electron文件，运行代码。7、这样就可以运行我们的桌面程序了。3、下载后将你需要集成的项目打包。
VUE项目打包Electron
sinco25的博客
07-27 1701
现有VUE项目打包成Electron应用
把 web 项目 改成 Electron 项目
wwwmewww的专栏
02-11 1073
文章目录一、创建 Electron 应用程序 一、创建 Electron 应用程序 新建项目，项目名换成你自己的。$ npx create-electron-app on8y-npm-gui 运行项目$ cd on8y-npm-gui #进入项目目录 $ npm start #运行 编译打包$ npm run make 在 out/on8y-npm-gui-darwin-x64/ 文...
将Vue项目转换为桌面应用的electron-quick-start教程
weixin_33622085的博客
08-01 837
Electron 是一款开源框架，最初由 GitHub 开发，用于构建跨平台的桌面应用程序。它的设计理念非常独特：利用现有的Web技术，即HTML、CSS和JavaScript，来构建客户端应用程序。这种设计使得前端开发者可以无需学习复杂的原生编程语言，如C++或Java，就能创建功能丰富的桌面应用。Electron 不仅吸收了Web技术的便捷性，同时利用了Node.js在服务端的强大功能，以及Chromium的渲染能力，从而成为一个全功能的桌面应用程序平台。
vue项目打包成electron桌面软件 ---踩坑日记
biubiubiuPlus的博客
03-16 2770
如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。 官网地址 注：vue的新老项目都可打包成electron桌面软件，我这里是新建的新项目 1.搭环境 //安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org //安装脚手架 npm install @
# 角色 你是一个高级技术总监，需要立足长远，做好技术选型，兼顾技术的长久，主流，开发效率，运行效率， 社区生态，持续更新，开源许可等。 # 目标 从下列electron+vue的跨平台开发框架中选择符合要求的最优选项 # electron+vue的跨平台开发框架选项 https://github.com/electron-vite/electron-vite-vue https://github.com/Deluze/electron-vue-template https://github.com/nklayman/vue-cli-plugin-electron-builder https://github.com/quasarframework/quasar 中electron模式 # 要求 1.社区star 热度高 2.要求还在持续更新中,要避免已经停止更新维护甚至已处于归档状态的项目 3.属于主流推荐 4.生态丰富 5.有大公司应用案例 6.有较多的招聘岗位 7.被很多独立开发者选择 8.文档丰富,简单易学
08-10
- **生态丰富度**：Vue.js 的生态系统非常丰富，包括 Vue Router、Vuex、Vue CLI 等工具，Electron 也有大量的插件和扩展，能够满足复杂应用的需求。 - **招聘岗位数量**：由于 Vue.js 和 Electron 都是当前热门的...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值