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

最新推荐文章于 2024-07-29 22:34:07 发布
最新推荐文章于 2024-07-29 22:34:07 发布
阅读量1.2k 收藏
点赞数
分类专栏： Vue 文章标签： vue vue-cli3 electron elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunnyloves/article/details/119743325
版权

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-cli-plugin-electron-builder-适用于Electron的Vue CLI 3插件，无需使用Electron Builder的必需配置。-Vue.js开发
05-27
Vue CLI插件Electron Builder可以轻松构建带有Electron Build状态的台式机Vue.js应用程序：快速入门：在Vue CLI Plugin Electron Builder可以轻松地构建带有Electron Build状态的台式机Vue.js App桌面。 ：在使用Vue...
如何将一个vue项目集成到electron框架中
Yw2026的博客
05-29 1842
5、 打开我们的electron文件，找到其中的frontend文件，将我们的压缩包移动到electron文件中，并改名为frontend，解压缩，替换掉frontend文件，如下图。1、electron是一个桌面应用程序的框架，可以将vue项目集成为一个桌面应用程序。压缩的目的是为了更好的将项目文件复制到我们的electron框架中。这样我们的frontend文件中就装着我们的vue项目文件了。6、打开electron文件，运行代码。7、这样就可以运行我们的桌面程序了。3、下载后将你需要集成的项目打包。
第一篇 vue项目web端如何转桌面端（electron）
qq_42647677的博客
02-18 1083
需要把现有的web端项目转成桌面端，原项目框架是vue,桌面端需要适配windows和麒麟系统，经过技术调研，选择electron做为桌面端框架，以下不以具体项目来说，从使用vue2搭建项目开始，然后转成桌面端附上官网链接：Electron框架 Electron中文网 官网。
项目实战：从零使用vue+electron打造一个完整的俄罗斯方块（纯前端，H5+exe）
最新发布
m0_73459939的博客
07-29 1483
纯前端从零使用vue+electron完整写出一个俄罗斯方块并打包为exe（可同时H5和exe）
vue转electron项目以及使用fs报错：Module not found: Error: Can‘t resolve ‘fs‘ in解决办法
热门推荐
feinifi的博客
09-16 2万+
vue项目转electron手动操作需要在命令行下运行vue add electron-builder，在使用node依赖开发桌面程序的时候，需要把node集成进来，配置nodeIntegration变量。
VUE项目打包Electron
sinco25的博客
07-27 1398
现有VUE项目打包成Electron应用
VUE项目转Electron心得
Sky_xinkong的博客
10-11 874
4、修改路由配置，将vue-router模式更改为 hash，并修改导航渲染路径；在eletron中，导航经过path处理后，会返回文件绝对路径，需修改为相对路径；进到对应目录，修改文件名，把下划线去掉。3、修改VUE项目使用的js-cookie插件，修改为localStorage或者sessionStorage；2、集成成功后src下生成background.js文件，根据需求修改src/background.js文件。5、修改生产环境配置文件，请求地址更改为完整路径；插件来集成 Electron；
使用electron将vue-cli项目打包成exe的方法
01-21
如果你已经做好了一个vue的项目，并且想要将他打包成exe,那么请继续阅读。 首先你可以下载一个demo了解一下。 git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install ...
vue-cli-plugin-electron-builder：使用Electron轻松构建用于桌面的Vue.js应用
01-30
Vue CLI插件电子生成器使用Electron轻松构建用于桌面的Vue.js应用生成状态：顶级支持者快速开始： 在使用Vue-CLI 3或4创建的应用程序目录中打开一个终端（建议使用4）。 然后，通过运行以下命令安装并调用vue-cli-...
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...
如何将一个现有的Vue网页项目封装成electron桌面应用（转载）
Solomwn的博客
08-24 1710
简介 需求缘由 基础 步骤 总结 参考内容 需求缘由 开发了很久的网页项目，领导突然想变成桌面应用，又要重写代码？no，no，no。不可能的。重写代码吃力不讨好，浪费时间，浪费精力。那么我们该怎么办呢？ 幸好，electron是如此神奇，它提供了一种能让你将任何前端代码的网站页面封装成桌面应用。无论是vue，react 还是 angular等现有的框架都能实现。 基础 学习该内容需要基本的 javascript 语法基础，以及 node.js 基础。 步骤 1，安装electron依赖包（局部安装，只安装开
2024年最全webstorm的安装及基本配置，2024最新物联网嵌入式开发高频精选面试题分享
2401_85015025的博客
05-14 499
择“License server”,然后在输入框中输入 License server address 为：http://hb5.s.osidea.cc:1017（有可能不能用，自己可以百度搜一下最新的）点击”Activate”按钮。人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**各种配置 可以根据自己的需求自行配置。7、开始基本配置 主要在。
2024年echarts饼图如何去掉指示线指示文字_echarts饼图去掉标签，面试必备
2401_85012069的博客
05-14 1131
legend: {data: []},series : [name: ‘访问来源’,label: {normal: {},data:[{value:335, name:‘直接访问’},{value:310, name:‘邮件营销’},{value:234, name:‘联盟广告’},{value:135, name:‘视频广告’},{value:1548, name:‘搜索引擎’}],},
将Vue项目打包为桌面应用 electron
故人两相忘的博客
01-06 1875
用electron-quick-start打包vue桌面程序
vue项目打包成electron桌面软件 ---踩坑日记
biubiubiuPlus的博客
03-16 2596
如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。 官网地址 注：vue的新老项目都可打包成electron桌面软件，我这里是新建的新项目 1.搭环境 //安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org //安装脚手架 npm install @
惊！把vue项目改成electron桌面端应用如此简单
codingWeb的博客
07-31 4921
以前vue项目改成桌面端我记得是比较麻烦的，要配置很多的依赖项，没想到现在就是执行几行命令就完事了 目标：尝试把此项目改成桌面应用 在项目根目录下执行如下命令： vue add electron-builder 安装过程中会提示选择版本，一般有三个版本可以选择，选择最新的版本就可以了 安装完成后： 1.执行npm run serve 正常打开网页端项目 2.执行npm run electron:serve 打开桌面端应用 想打包桌面端应用，执行如下命令 npm run electron:build
如何将一个现有的Vue网页项目封装成electron桌面应用
Aglaia_web的博客
07-23 2367
简介需求缘由基础步骤总结参考内容 需求缘由 开发了很久的网页项目，领导突然想变成桌面应用，又要重写代码？no，no，no。不可能的。重写代码吃力不讨好，浪费时间，浪费精力。那么我们该怎么办呢？ 幸好，electron是如此神奇，它提供了一种能让你将任何前端代码的网站页面封装成桌面应用。无论是vue，react 还是 angular等现有的框架都能实现。 基础 学习该内容需要基本的 javascript 语法基础，以及 node.js 基础。 步骤 1，安装electron依赖包（局部安装，只安装开发依赖）
使用Electron编译iview-cli 脚手架生成exe
weixin_33951761的博客
02-22 164
2019独角兽企业重金招聘Python工程师标准>>> ...
已有vue cli项目改成electron
summer942zjb的博客
07-23 289
安装依赖 # 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.
electron项目里面如何升级vue-cli-plugin-electron-builder
05-18
3. 如果您在 `package.json` 文件中指定了旧版本的 `vue-cli-plugin-electron-builder`，请将其更新为最新版本的 `@vue/cli-plugin-electron-builder`。 4. 确保您的项目配置文件中使用了最新版本的插件。如果您...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值