前端项目打包成.exe桌面应用初体验

最新推荐文章于 2024-06-26 07:46:27 发布
最新推荐文章于 2024-06-26 07:46:27 发布
阅读量990 收藏 2
点赞数
分类专栏： 前端 文章标签： 前端 桌面应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43631810/article/details/98482516
版权

使用electron
github地址：https://github.com/electron/electron-quick-start

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

配置文件main.js中的入口地址 ：

mainWindow.loadFile('index.html') //入口地址

将html放入electron-quick-start文件夹中并修改入口地址，就可以使用exe窗口预览前端项目了。

Hy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端页面生成exe可执行文件的方法
08-28
给大家介绍了Electron 怎么将网页打包成桌面应用（web前端页面怎么生成exe可执行文件），感兴趣的朋友跟随脚本之家小编一起学习吧
electron-packager打包exe.rar
11-28
Electron Packager是一款强大的工具，用于将Electron应用打包成可执行文件，如Windows下的.exe，Mac OS的.app，以及Linux的.deb或.rpm等。这个"electron-packager打包exe.rar"文件，显然包含了使用Electron Packager...
Vue项目打包成exe可执行文件（无瑕疵，完美版）
热门推荐
往事随风
11-09 1万+
Vue项目打包成exe可执行文件 实现思路：从electron官网上拉取代码，把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html，输入打包exe的命令即可 1、 拉取electron官网上的demo，拉下来之后安装依赖，项目跑起来之后，就不用管demo了，开始配置自己的Vue项目 git clone https://github.com/electron/electron-quick-start npm i npm run start 2、修改自
前端项目打包成exe文件
fangcaojushi的博客
06-26 737
6、在electron-quick-start项目中找到入口文件 main.js ，修改打包的文件路径为我们的index.html（替换成我们的文件非常非常的重要，注意行数，一般都在16行多一点）8、运行命令打包，然后项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件。2、修改自己项目的vue.config.js，路径必须修改为 ./，不是这个后续打包好的页面可能会出现白屏，加载不出来的情况。
使用 Electron 给前端项目 打包成exe
terrybg
10-31 1万+
还是接着上一篇的例子，在项目目录输入这个命令 上一篇文章地址：https://juejin.im/post/6889422940928999438 使用electron-packager打包成exe 安装electron-package cnpm install electron-packager -g 打包命令 如果项目 没有node_modules 文件，需要先安装依赖 cnpm install 第一次打包，需要下一个压缩包，因为electron压缩包的服务器在国外，所以网速很慢而且不稳
前端项目打包成为exe
weixin_33978016的博客
09-13 1886
1.安装webpack //全局安装 npm install -g webpack //安装到你的项目目录 npm install --save-dev webpack 2. babel Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的 功能或拓展，你都需要安装单独的包（用...
2024年最全webstorm的安装及基本配置，2024最新物联网嵌入式开发高频精选面试题分享
2401_85015025的博客
05-14 457
择“License server”,然后在输入框中输入 License server address 为：http://hb5.s.osidea.cc:1017（有可能不能用，自己可以百度搜一下最新的）点击”Activate”按钮。人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**各种配置 可以根据自己的需求自行配置。7、开始基本配置 主要在。
【前端】为什么要打包
YYece的博客
06-06 8091
打包是在做什么 前端写代码时为了方便会将代码写在许多文件中，但是转化成HTML代码时，会使用<script>标签进行引入js代码，这样会使页面进行的http衍生请求次数的次数增多，页面加载耗能增加。使用打包过后将许多零碎的文件打包成一个整体，页面只需请求一次，js文件中使用模块化互相引用（export、import ），这样能在一定程度上提供页面渲染效率。 打包同时会进行编译，将ES6、Sass等高级语法进行转换编译，以兼容高版本的浏览器。 必须要打包吗？ 上文提到的HTML需要引用有很多文
前端项目-split.js.zip
09-03
总的来说，Split.js是一个强大的前端工具，为开发者提供了创建可调整大小视图的能力，无论是在桌面应用还是移动设备上，都能实现流畅的用户体验。它的轻量级特性、丰富的配置选项以及易于集成的特性，使其成为前端...
前端项目-grommet.zip
09-04
【grommet.zip】压缩包文件包含的是一个名为“grommet-master”的前端项目，它是一个基于Grommet框架的企业级用户体验设计平台。Grommet是专为构建现代、响应式且无障碍的Web应用程序而设计的，尤其适用于企业级应用...
前端项目-ionic.zip
09-02
总结，"前端项目-ionic.zip"提供了一个完整的Ionic开发环境，借助AngularJS的强大功能和Ionic丰富的UI组件，开发者能够快速构建出具有原生体验的移动应用。无论是新手还是有经验的开发者，都可以在这个项目基础上，...
前端项目-mini.css.zip
09-02
在IT行业中，前端开发是构建Web应用程序不可或缺的一部分，它涉及到用户与网站互动的所有视觉和交互元素。本项目名为"mini.css"，是一个专为前端开发者设计的轻量级CSS工具包，强调简洁、快速响应以及样式中立。下面...
前端为何要进行打包和构建（面试题）
qq_29207823的博客
03-10 717
代码方面 体积更小，加载更快（tree-shaking，压缩合并） 编译高级语言和语法（ts，es6，模块化） 兼容性和错误提示（polyfill，postcss，eslint） 研发流程 统一、高效的开发环境 统一的构建流程和产出标准 集成公司构建规范（提测，上线） ...
前端代码为何要进行构建和打包？
zpfnext的博客
10-02 1089
const instanceOf = (A,B) => { let p =A; while§ { if(p === B.prototype) { return true } p = p.proto } return false } 1
讲讲你对前端模块化的认知, 为什么要打包, 有了 Webpack 为什么还要使用 Vite
weixin_43850639的博客
08-30 424
在早期的网页开发中，大部分的 JavaScript 代码都写在一个单独的文件中或直接嵌入在 HTML 中。随着项目增长，这种方法会导致代码难以维护，因为所有的逻辑和功能都混杂在一起。模块化的出现让开发者能够分解他们的代码，只关心单个模块的功能。每个模块有其明确的职责，可以独立开发、测试和维护。Webpack 是前端打包的先驱之一，但随着开发需求的增长和技术的进步，开发者开始寻找。这样做的目的是保持代码的整洁、易于维护、减少全局作用域的污染和提高代码重用性。选择哪个工具取决于项目的特定需求和团队的偏好。
electron 把前端项目打包成桌面应用
moyebaobei1的博客
02-11 2070
electron 集成了nodejs 和chromium。所以也“继承”了chromium 处理js和进行页面渲染显示的逻辑，目前了解到的是支持多进程模式。所以需要优先配置node环境。 前期环境搭建以及测试可以参考https://blog.csdn.net/qq_35057009/article/details/89638688。 然后开始构建我们的electron 项目，对于快速搭建项目，...
利用nativefier和electron-winstaller实现将前端网站打包成桌面程序exe文件。
liushijun_的博客
01-14 1820
1、首先利用nativefier将前端页面包装成客户端桌面程序。 下载 nativefier npm install nativefier -g 然后运行 nativefier https://www.baidu.com/ 你就可以得到一个文件夹里边找到exe文件就是打包好的百度客户端。 当然我们也可以将配置项放在文件中方便复用和配置多个参数， 新建你的.js文件写入以下代码 var nat...
前端打包
weixin_43924896的博客
04-09 838
为什么要打包 转载 js作为一门脚本语言，在没有node的时候，只能通过< script >标签插进html去运行，单个的js文件离开了html他什么都不是。 如果一个网站功能很多，我要按照功能划分写15个js文件，那我就要插入15个< script src="" >去引那些js文件，还tm得注意引用顺序和插入的位置，一方面难以维护，一方面增加了网页加载时的请求数量（15个不算多，如果是200个js文件的话，那得多蛋疼）。 自从有了node之后，单个的js文件离开了html以后也可以
为什么我们需要模块打包工具
weixin_45047039的博客
11-24 567
为什么我们需要模块打包工具前言一、模块化的问题1、ES Module存在环境兼容问题2、模块文件多,网路请求频繁3、所有前端资源都需要模块化小结二、提出一些设想 前言 模块化很好的解决了我们在复杂应用开发中的代码组织问题,但是随着我们引入模块化,我们的应用又会产生一些新的问题。 一、模块化的问题 1、ES Module存在环境兼容问题 首先第一个就是我们所使用的ES Module这样一款模块系统,它本身就存在环境兼容问题,尽管现如今主流浏览器的最新版本都已经支持这样一个特性了。 但是我们目前还没有办法去做到
nodejs能打包成exe么
最新发布
07-31
是的，Node.js应用程序可以通过一些工具和技术打包成.exe文件，使其能够在Windows操作系统上像传统安装程序一样运行，而无需用户手动安装Node.js环境。以下是几种常见的方法： 1. **Electron**：这是一个开源框架，它允许开发者将Node.js应用打包成桌面应用，包括Windows下的.exe。Electron基于Chromium和Node.js，使得应用具有现代界面和跨平台能力。 2. **nw.js (formerly known as Node-webkit)**：这个类似Electron的框架，也支持将Node.js应用打包为桌面应用程序，包括Windows下的.exe文件。 3. **CrossPackager**：虽然不是直接针对Node.js，但是一些第三方工具，如Webpack的DllPlugin，可以与 Electron 或者 nw.js一起使用，构建离线版本的Windows可执行文件。 4. **Brunch**: 这是一个前端构建工具，它可以与Electron结合使用，创建跨平台的Windows .exe文件。 要注意的是，尽管这些方法可以让Node.js应用打包成.exe，但它们通常会增加应用的大小并引入额外的依赖。同时，由于涉及到浏览器引擎或模拟环境，性能可能会有所下降。如果目标仅限于Windows用户，并希望提供简洁的用户体验，那么这种方式可能是值得考虑的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值