vue使用electron打包成exe程序

原创 已于 2023-04-18 16:05:32 修改 · 368 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
跨平台

当前文章被收录于：

跨平台
1 篇文章 0 人学习
订阅专栏 查看详情
于 2023-04-18 15:11:03 首次发布
本文介绍了如何从GitHub克隆Electron快速启动项目，使用npm安装依赖，然后将Vue应用打包进Electron，修改package.json的脚本，最后运行npmrunpackager以生成Windows64位的exe文件。

直接拉取官网代码

git clone https://github.com/electron/electron-quick-start

npm i

如果npm i 报错 就多试几次，不一定是什么问题

把自己vue打包的项目直接粘进来

package.json中修改为

 "scripts": {

    "start": "electron .",

    "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"

  } ,

npm run packager

直接生成exe

标签
#vue.js #electron #npm
electron将vue项目打包成exe桌面应用流程及可能出现的问题
Z.Dragon 的博客
11-13 2638
近期项目需求，把网页（基于vue）打包成exe桌面应用，在网上找到了electron； 这里说说我对electron-builder的使用心得 electron打包exe程序主要有两种方法： 1、electron-packager：初学者入门demo传送门 2、electron-builder：稍微复杂一丢丢，需要配置文件 ####### 先将vue项目打包 npm run build 得到dis...
vue项目打包成electron桌面端exe应用（0-1保姆级教程）
qq_52132550的博客
07-15 7360
vue项目打包成桌面端exe应用（0-1保姆级教程）
electron-vue进程无法杀死导致任务管理器资源飙升，电脑卡死
前进者
09-29 2488
问题描述 electron打包的exe上线后，由于开机自启动该项目，没有关掉进程的情况下开启多个exe导致任务管理器资源升高，电脑直接卡死的现象 解决思路 在dev-runner.js中找到了关于杀死进程的方法 1 2 3 4 5 6 7 8 9 10 if (electronProcess && electronProcess.kill) { manualRestart..
Electron # 调试时总是没有关闭完
skysys的研究小屋
07-29 2796
由于处在项目开发阶段，会有各种问题。 其中一个问题是，关闭了vscode，electron还驻留在内存中。 处理方法： 查看进程 tasklist | find "electron" 杀掉electron taskkill /f /t /im "electron.exe" 还可以考虑把这个写到package.json中。这样可以通过npm scripts直接运行。 ...
Electron打包发布vue项目
haohan0307的博客
08-06 7114
electron发打包布vue项目，electron自动更新
使用electron将vue项目打包成exe程序
zyf_maple的专栏
09-03 2328
一、下载electron git clone https://github.com/electron/electron-quick-start 二、进入我们自己的项目，修改公共路径为相对路径(如果不修改，则在npm run build后出现白屏情况 。注：我由于首先就修改了路径，所以没有出现所谓的白屏情况，这里备注的目的是为了告知不修改可能产生的问题，因为很多人踩过坑)。 vue-cli3+版本的在vue.config.js中修改publicPath 将"/"修改为"./"，如果是vue-cli2.
Electron打包vue项目成exe桌面应用程序
wmmcsdn614的博客
09-25 2621
方式一：克隆electron项目进行打包 第一步：克隆electron项目并运行 1、git clone https://github.com/electron/electron-quick-start 2、cd electron-quick-start 3、npm install 4、npm start // 启动项目，会打开electron程序 第二步：打包程序 1、先将vue项目打...
Vue Electron 使用来给若依系统打包成exe程序，出现登录成功但是不跳转页面（已解决）
Tongyao
06-11 618
在Vue打包Electron应用时，登录后页面跳转失败但后台请求成功。问题原因是js-cookie库在Electron中无法操作cookie且不报错，导致登录状态失效。解决方法是将js-cookie替换为localStorage存储token，修改auth.js配置后问题解决。这提示Electron开发中需注意不同环境下的API兼容性问题。
Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样
BADAO_LIUMANG_QIZHI的博客
07-14 986
场景 electron-vue 基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码。 该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。 使用electron-vue可以将vue的
用electron把vue2工程打包成可以安装的桌面exe程序
最新发布
cys6736873的博客
09-14 451
用electron把vue2工程打包成可以安装的桌面exe程序
用electron将vue项目打包成桌面应用程序.exe
weixin_43842567的博客
01-08 758
vue项目引入electron，将项目打包成桌面应用程序 1、在vue项目里下载electron相关依赖 npm install electron --save-dev npm install electron-packager --save-dev 2、在项目的根目录下新建electron.js和preload.js两个文件 // Modules to control application life and create native browser window const {app, Brows
使用electron把vue项目打包成windows应用exe程序
qq_42274445的博客
04-30 554
1、安装electron依赖 npm install electron --save-dev npm install electron-packager --save-dev 2、修改vue.config.js文件 const publicPath = process.env.VUE_APP_PUBLIC_PATH || './' 3、打包生成dist文件夹 npm run build 4、在dist文件夹下创建electron.js和package.json文件 electron.
electron打包vue项目为exe问题记录（若依前后端分离vue2，亲测有效无坑版）
koyitea123的博客
10-08 1695
5.在electron-quick-start项目中找到入口文件 main.js ，修改打包的文件路径为我们的index.html（替换成我们的文件非常非常的重要，注意行数，一般都在16行多一点）7.运行命令打包，然后项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件。(1).修改vue.config.js，路径必须修改为 ./，不是这个后续打包好的页面可能会出现白屏，加载不出来的情况。
一步步使用electron把vue打包成客户端
weixin_47190975的博客
09-21 5471
一步步使用electron把vue打包成客户端
用electron将vue项目打包成.exe文件【保姆级教程】
heavenz19的博客
03-15 6567
说明： vue2项目，使用的vue-element-admin框架，用electron打包成.exe文件。
解决线程中有阻塞情况下程序退出不了
sipvoiper的专栏
01-06 960
设置该Thread的IsBackground为true 一个线程或者是后台线程或者是前台线程。后台线程与前台线程类似，区别是后台线程不会防止进程终止。属于某个进程的所有前台线程都终止后，公共语言运行库就会结束该进程。所有剩余的后台线程都会停止且不会完成。参照：http://msdn.microsoft.com/zh-cn/library/system.threading
实战electron项目相关知识点汇总
02-21 1556
清缓存当前打开的BrowserView页面后，重新加载 view.browserView.webContents.session.clearCache().then(()=>{ view.browserView.webContents.reload() }) 获取窗口的宽、高、位置 const { width, height, x, y } = this.newsWin.getBounds() 重新设置窗口的宽、高、位置 this.newsWin.setPosition(x,
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

不愁发量

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

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

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

打赏作者

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

抵扣说明：

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

余额充值