electron-vue打包借助Inno Setup打包成可执行文件

最新推荐文章于 2024-04-15 17:45:47 发布
最新推荐文章于 2024-04-15 17:45:47 发布
阅读量855 收藏
点赞数
分类专栏： 前端 vue 文章标签： vue electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43484014/article/details/124006707
版权
前端 同时被 2 个专栏收录
40 篇文章 1 订阅
订阅专栏
vue
31 篇文章 3 订阅
订阅专栏
1.使用yarn build将程序打包成安装包形式

在程序文件中的build文件夹中的win-unpacked中
在这里插入图片描述

2.下载工具

下载软件Inno Setup，这是官网https://jrsoftware.org/isdl.php

  1. 安装好了之后打开软件，点击取消
    在这里插入图片描述

  2. 点击文件–>新建，点击下一步
    在这里插入图片描述

  3. 输入程序名称、版本、发布者
    在这里插入图片描述

  4. 下一步默认，不需要修改
    在这里插入图片描述

  5. 选择文件和安装包文件夹
    在这里插入图片描述

  6. 下一步默认选项
    在这里插入图片描述

  7. 下一步没有许可证文件跳过，直接下一步
    在这里插入图片描述

  8. 默认选项
    在这里插入图片描述

  9. 选择安装时支持的语言
    在这里插入图片描述

  10. 选择文件输出时的文件夹、文件名、程序对应的图标icon
    在这里插入图片描述
    之后全部点击下一步，最后点击完成

  11. 确认立即编译
    在这里插入图片描述
    在这里插入图片描述

  12. 编译完成之后，在第10步选择的输出文件夹中，即可看到编译成功的可执行文件
    在这里插入图片描述

Song_Estelle
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Inno Setup工具打包应用程序
shine1162226的博客
12-03 1353
使用Inno Setup工具打包应用程序 1. 工具准备 Inno Setup软件 下载地址：Inno Setup官网http://www.jrsoftware.org/isinfo.php 2. 按向导完成打包 （1） 打开Inno Setup软件，点击文件-新建 在弹出的“Inno Setup脚本向导”对话框中点击”下一步“ （2） 在弹出的“应用程序信息“对话框里填写要制作程序安装包的信...
electron-vue 打包所需文件
03-23
总之，使用 Electron-Vue 结合 electron-builder 可以高效地开发和打包桌面应用。遇到问题时，检查配置、依赖、资源路径和缓存是解决问题的关键步骤。不断学习和理解这些工具的工作原理，将有助于提升开发效率并优化...
electron打包后, 使用NSIS再打包成安装包 .exe文件
weixin_33701251的博客
07-18 172
NSIS下载地址
Electron App 安装包定制 -- Inno Setup 脚本 Pascal Scripting 初探
Gefangenes的博客
07-09 350
如果想对安装包安装过程进行自定义那么首先电脑上先安装 Inno Setup Compiler, 再创建 setup.iss 文件通过 ide 新建 .iss 文件过程如下：打开 Inno Setup Compiler新建一个 Inno Setup Script Wizard 开始创建 .iss 脚本文件按提示一步步往下走，可以选择填写 app 名字，版本，公司之类的信息这些都不重要直到另外 Other application files: 这一项点击 Add folder... 按钮。
electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动
weixin_30414155的博客
08-30 1054
1.初始化node项目，生成package.json文件 npm init 2.安装electron，并保存为开发依赖项 npm install electron -D 3.根目录下新建index.js文件 const {app, BrowserWindow} = require('electron') let mainWindow fu...
Inno Setup使用教程 - 打包SpringBoot+Vue前后端分离项目
Alex的博客
06-07 3854
最近做的一个项目需要将开发的系统运行在单机的电脑上，但是开发的系统需要依赖于环境，需要将运行环境和系统一起打包成安装包，在单机的电脑上可以直接运行安装包，点击桌面图标就可以运行系统。在网络上找了几款打包软件最终都以失败告终，之后同事告诉我了这个软件，肝了一天一夜终于把安装包的配置搞好了，最后在这里把Inno Setup打包前后端分离项目的教程分享给大家😘https://pan.baidu.com/s/1UJRi3ct18sG0JSYPDhgfmA 提取码：h3oohttps://jrsoftware.or.
安装electron
奔跑的QQEE的笔记
06-22 1963
1、安装node.js。node官网地址2、windows 下，命令行界面检查node是否安装成功。分别输入 node -v npm -v 。如果出现 node 和 npm 的版本号，则转下一步。否则转第一步。3、命令行下载淘宝镜像命令工具 cnpm。npm install cnpm -g --registry=http://registry.npm.taobao.org4、用 cnpm 命令安装
electron-vue利用webpack打包实现多页面的入口文件问题
10-17
在这个场景下，`electron-vue` 结合 `webpack` 可以帮助我们有效地管理这些多页面的入口文件。`electron-vue` 是一个预配置的 `Vue.js` 和 `Electron` 开发环境，它整合了 `vue-cli` 和 `webpack` 配置，使得在 ...
electron-vue打包流程.md
05-19
electron还是麻烦啊，看了很久的文章，总结打包流程
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
`electron-builder`是一个强大的打包和发布工具，它可以将Electron应用打包成适用于不同操作系统的可执行文件。它支持Windows、macOS和Linux，并且可以创建自解压包、DMG、AppImage等多种格式。`electron-builder`还...
electron-builder打包过程中报错所需的文件
01-24
学习项目使用的是`vue3`+`typescript`+`vite`+`...比如electron-builder打包过程中会涉及到四个包： 1. electron-v28.1.4-win32-x64 2. winCodeSign-2.6.0 3. nsis-3.0.4.1 4. nsis-resources-3.4.1 安装路径见本人博客
electron打包后，用inno打包成安装包
weixin_45578532的博客
11-30 513
是包含.exe文件的文件夹。需要打开的.exe文件。
Electron程序用Inno Setup或NSIS生成安装包
lihefei_coder的博客
09-25 1743
绿色程序文件比较多，而且体积较大不利于文件传输 打包成安装包是一个不错的选择，下面介绍Inno Setup和NSIS两种软件的打安包方式 方法一：用Inno Setup打安装包 1.软件下载地址：https://files.jrsoftware.org/is/6/innosetup-6.0.5.exe 2.下载安装完成后开始打包步骤 添加开机自动启动注册表 [Registry] Root: HKLM; Subkey: "SOFTWARE\Microsoft\Windows\Curre
electron+inno实现桌面应用制作成安装包
weixin_53639317的博客
06-28 342
指定应用程序的快捷方式，勾选默认的两项即可，即“创建主执行程序的快捷方式到公共开始菜单程序文件夹”、“允许用户创建桌面快捷方式”Application main executable file：应用程序主执行文件，electron打包生成的.exe文件；Add folders：添加应用程序文件，选择第8步中打包出的文件根目录即可，要把所有.dll文件及其他配置文件都包含进去；Custom compiler output folder：自定义编译器输出文件夹，即最终编译出的安装包要放哪个位置；
【Eelectron-vue】构建桌面应用（21）- Inno Setup CreateProcess failed；code 740 请求的操作需要提升
ASP.NET
08-28 713
在前面的文章中提到过，我是用的是一款名叫Inno Setup的打包安装工具，可以打包成windows安装文件。 在项目收尾的时候，发现使用Inno Setup打包成安装文件后，双击安装文件，执行安装，在最后一步的时候，如果你勾选了Launch 某应用的时候会出现需要提升程序执行权限的问题，如下： 在网上查了一下，其中微软官网提到需要提升程序的操作权限即需要用管理员权限启动才没有问题，连接查看这里。 然而，我并不想每次用户启动程序的时候都需要右键程序，然后选择管理员权限执行，所以这种官方的这种方式不是我想要
electron打包技术
weixin_33941350的博客
03-28 137
2019独角兽企业重金招聘Python工程师标准>>> ...
将vue项目打包成电脑端应用.exe
Lushengshi的博客
01-10 6474
vue项目打包成桌面应用程序.exe!
Windows环境下部署Nginx+Vue打包页面
wangxin1949的博客
10-15 297
第一次用Windows环境下的Nginx,有些小坑还是要注意! Nginx存储路径中不要出现中文. 我最初通过浏览器下载安装包后默认存放在用户的下载文件夹下,运行后发现一只报404,网上查了很多资料,试了很多中nginx.conf然并卵. 最后把Nginx解压后的包拷到D盘根目录下再运行,奇迹般的好了. 在此记下,中文目录害死人啊!!!!1 ...
【教程】将Vue项目打包为exe项目的教程-我的第一个原生Vue项目
最新发布
不食花生的猫：http://110.40.191.51/
04-15 3489
最近应朋友所需，开发了一个点单系统，由于放在浏览器中有诸多不便，因此考虑将其打包为exe可执行文件，该文章详细记录了打包步骤与注意事项。
electron-vue项目打包成exe
06-28
### 回答1： electron-vue 是一个使用 Vue.js 开发跨平台桌面应用的框架，可以使用 electron-builder 工具将其打包成 exe 文件。 以下是将 electron-vue 项目打包成 exe 的基本步骤： 1. 安装 electron-builder 在 electron-vue 项目的根目录下执行以下命令： ``` npm install electron-builder --save-dev ``` 2. 配置打包参数 在项目根目录下创建一个 electron-builder.json 文件，用于配置打包参数。可以参考 electron-builder 的文档进行配置，主要包括应用程序名称、版本号、图标等。 3. 执行打包命令 在项目根目录下执行以下命令进行打包： ``` npm run build:win ``` 该命令会生成一个 dist 目录，其中包含打包后的应用程序和安装程序，可以在 Windows 上运行。 以上就是将 electron-vue 项目打包成 exe 的基本步骤，希望对你有帮助。 ### 回答2： electron-vue 是基于 Vue.js 和 Electron 的开发框架，可以快速构建桌面应用程序。在开发完成后，开发者需要将其打包成 .exe 格式（Windows 可执行文件），以便部署和发布。 以下是将 electron-vue 项目打包成 .exe 文件的步骤： 1. 准备工作 首先要安装 electron-packager 包，这个包可以让我们快速打包 electron 应用程序。可以在终端中输入以下命令进行安装： npm install electron-packager --save-dev 2. 修改 package.json 文件 在 package.json 文件中，需要添加以下代码： "scripts": { "package": "electron-packager ./ --platform=win32 --arch=x64 --icon=./build/icons/icon.ico --out=./dist --ignore=dist --overwrite" } 这个代码段是一个命令，运行它可以将项目打包成指定平台（这里是 win32，也就是 Windows）的可执行文件，以 .exe 格式输出到指定目录（这里是 dist 文件夹）。其中，--icon 表示程序图标，--ignore 是忽略打包的文件夹，--overwrite 表示覆盖已有的输出文件夹。 3. 执行打包命令 在终端中输入以下命令，即可开始打包： npm run package 然后等待一段时间，打包成功之后会在 dist 目录下生成 .exe 文件。 4. 发布 最后将 .exe 文件上传到合适的平台（例如 GitHub Release），这样用户就可以下载并使用了。 注意事项： - 在打包时需要注意修改 .ico 图标文件的路径，确保能正确找到。 - 若需要打包成其他平台的可执行文件，可以修改 --platform 和 --arch 参数。 - 打包时，如果报错了，可以在命令行加上 --verbose 参数，查看具体错误信息。 ### 回答3： electron-vue是一个基于vue.js构建的 electron框架的项目，可以让开发者快速地构建跨操作系统的桌面应用程序，并且electron-vue项目也非常容易打包成exe可执行文件，便于在Windows平台上使用。 打包electron-vue项目成exe的方法: 首先要在命令行中进入项目根目录， 然后运行： npm run build 或 yarn run build 这两个命令将会编译和打包electron-vue项目，生成一个dist目录。 在默认情况下，打包出的exe应用程序是没有图标的，如果需要添加图标，需要在build目录下找到win下的icon.ico文件，并替换成你自己的图标文件。 接下来，需要使用第三方的打包工具，如electron-builder，打包成exe文件，命令如下： npm run dist 或 yarn run dist 执行完这个命令后，就会在dist目录下生成一个installer目录，里面包含着生成的exe文件和其他必要的文件。 理论上，exe应用程序已经可以在Windows平台上使用了。 总结： electron-vue项目打包成exe并不是一件复杂的事情。只需进入项目根目录运行 npm run build 命令，然后使用第三方打包工具electron-builder打包，就可以生成一个可执行的exe文件了，这样就极大地方便了开发者在Windows平台上部署应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值