基于NW.JS全屏无边框程序将HTML打包成可执行文件.EXE

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

#node.js #html

本文详细介绍了如何使用NW.js将Web应用打包成桌面应用，包括下载、安装、配置package.json文件、打包成.nw文件及转换为.exe文件的全过程。同时提供了两种封包方法，以实现独立运行的可执行文件。
一、介绍/下载/安装打包软件NW.js

NW.js 官网：nwjs.io
NW.js中文网：nwjs.org.cn
在这里插入图片描述
诚如中文网站所说，对于国内用户，下载速度慢过乌龟，大多数会下载失败，建议使用淘宝NPM镜像下载：
https://npm.taobao.org/mirrors/nwjs/

NW.js分两个版本：

  • normal版：正式发布版
  • SDK版：带chrome调试器的，方便调试使用

依各自需要使用，不需要调试，只是用于打包/去边框，可直接下载发布版

这里演示下载0.45.0的发布版：
https://npm.taobao.org/mirrors/nwjs/v0.45.0/nwjs-v0.45.0-win-x64.zip
下载的是个压缩包，直接解压即可，需要可配置一下环境变量，不懂直接忽略也行，不影响后续操作
在这里插入图片描述

想入门的可以去中文官网了解开发文档快速入门手册：
https://nwjs.org.cn/doc/user/Getting-Started.html
只要打包封包直接跳过看下文即可

二、打包操作

在需要打包文件中新建文件：package.json，里面的内容是：
可根据需求进行更改，不涉及可默认
在这里插入图片描述

	"main": "index.html", 	//打包程序入口
	"name": "cloud",		//字符串必须是小写字母或者数字，可以包含"." 或者"_"或者"-" ，不允许带空格,必须唯一
	"description": "demo app of node-webkit",	//描述
	"version": "1.0.0",		//版本
	"keywords": [ "demo", "node-webkit" ],		//关键字
	"window": {				//窗体配置
	"title": "node-webkit", //窗体的标题
	"icon": "link.png",		//窗体的ico图标
	"toolbar": false,		//是否要工具栏
	"frame": true,			//bool值。如果设置为false，程序将无边框显示 也就是没有系统默认的关闭，最小化，全屏按钮
	"width": 1000,			//窗口的大小：宽
	"height": 800, 			//窗口的大小：长
	"position": "mouse", 	//字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。
	"min_width": 400,		//最小宽度
	"min_height": 200,		//最小高度
	"max_width": 9999,		//最大宽度
	"max_height": 9999,		//最大高度
	"as_desktop" :false,	//是否作为桌面背景窗口显示
	"resizable":true,		//是否允许调整窗口大小
	"always-on-top":true,	//窗口是否置顶
	"fullscreen":false,		//是否全屏显示 
	"show_in_taskbar":true,	//是否显示任务栏图标 
	"show":true, 			//如果设置为false，启动时窗口不可见
	"kiosk":false 			//是否使用kiosk模式。如果使用kiosk模式，应用程序将全屏显示，并且阻止用户离开应用
},
	"webkit": {
		"plugin": true,		//bool值，是否加载插件，如flash，默认值为false。
		"java":false, 		//bool值 是否加载java applets
		" page-cache":false //是否启用页面缓存
	}
}

再选中全部文件，压缩成 .zip 文件(.rar文件不能)，并将后缀改为：.nw
在这里插入图片描述
把刚刚的.nw用nw.exe打开，会出现你的网页(有配置环境变量/懂得路径操作的可以不用打开这一步)，其实打开就相当于是预览成效，并定位打包程序路径

nw.exe就是刚刚下载的NW.js里面解压出来的文件
在这里插入图片描述

接下来就是打包成EXE
CMD打开命令提示符，CD定位到nw.exe所在的文件夹，输入:

copy /b nw.exe+文件的名字.nw 打包后生成的文件名字.exe

这里吾输入的是：

copy /b nw.exe+Ring.nw Ring.exe

至此打包完成，在nw.exe所在文件目录下已生成可执行文件Ring.exe

该可执行文件依赖于目录下的其他文件，若需要单独运行，还得继续封包

NW.exe 的默认图标通过配置文件是无法修改的，需要用工具 Resource Hacker 来修改
在这里插入图片描述

纯小白在线打包：http://www.krpano.tech/

nw.js项目用nsis打包成一个exe文件的坑
baidu_30907803的博客
05-17 3729
nsis把nw.js整个项目编译成一个exe包，可以实现分发给客户时，可以给用户更好的体验，但是隐藏着一个坑。也可以说是nw.js本身存在的坑。由于nw.js是基于node.js和chromium的应用程序运行环境的。如果项目用到localstorage来实现部分缓存和自动登录功能实现，则作为浏览器的内核渲染页面，则用户安装应用后 必然会生成本地缓存。导致用户下次重装应用时，还是使用上一个安装包的...
让HTML网页变成一个exe执行程序（node-webkit）
热门推荐
Little Luck
01-19 3万+
1.使用HTMLRunExe 工具 但是当html网页包含html5内容，则会 是不是有所变形呢？ 那是因为其框架只支持 ie8的页面预览属性 不支持 css3和html5 ？ 解决办法1. <script src="js/html5shiv.js"></script> <script src="js/respond.min.js">&lt...
让网页应用秒变高颜值桌面端：Nativefier无框窗口全攻略
最新发布
gitblog_00700的博客
09-26 378
你是否遇到过这样的困扰：喜欢的网页应用没有桌面版，每次都要打开浏览器访问，既占资源又不够便捷？ Nativefier 这款开源工具能帮你将任何网页一键打包成桌面应用，但默认窗口样式往往不够精致。本文将带你深入了解 Nativefier 的无框窗口设计原理，手把手教你自定义标题栏与拖拽功能，让你的专属桌面应用颜值飙升。 ## 无框窗口基础：摆脱系统束缚 无框窗口（Frameless Window...
使用nw.js将web项目打包为exe软件（xp版本）
梦想成为全栈的切图仔
10-19 1555
使用nw.js将web项目打包成exe软件
【nw.js】使用nw.js将html页面打包成exe免安装程序
饺子大魔王
12-26 2814
右键计算机——>属性——>高级系统设置——>高级——>环境变量——>系统变量——>找到path，双击——>新建——>将所在路径添加进去（如：“F:\zip”包含进环境变量），之后点击确定就可以了。1：下载zip，你可以到该网址（http://stahlworks.com/dev/index.php?tool=zipunzip）下载zip执行文件，如下。
nw.js打包处理教程(将html打包成PC应用的教程)
09-14
nw.js打包处理的整个教程。指导将html网页通过nw.js打包处理为能在PC上能运行的exe文件。此教程为完整教程，比当前网页上搜索的教程还要清楚，更容易理解。
nw.js打包教程
weixin_34160277的博客
09-29 971
一、准备好需要打包的文件 1、到nw.js的官网下载下载一个windows版本的node-webkit,解压后得到一个文件夹2、在nw的根目录新建一个package.json的配置文件3、将项目内所有文件压缩成一个压缩包 app.zip4、压缩包重命名为 app.nw5、将压缩包放置到下载解压后的 nw.js 根目录下6、shift+鼠标右键 选择在此处打开命令窗口7、输入 copy b/ nw....
nw.js将web程序打包成exe可执行文件的方法
m0_46686731的博客
04-17 2727
2.3package.json可以理解为应用的配置文件，是必须要有的；index.html作为应用的入口文件，内容和一般网页类似，名字可以按自己喜好起，但是一定要和配置中的“main”参数设置一致；生成app.exe文件之后，将多余的文件删除，保留上面这些文件即可，上面这些文件是app.exe执行所需要的必须的文件；2.1解压后的文件夹如上图所示，其中myapp（名字随便起）里面放的是自己的前端项目。至此，nw.js将web程序打包成exe可执行文件结束。），选择normal的即可，下载完成之后解压。
Windows - 将网页打包成 exe 可运行程序（教程）
08-23
在Windows操作系统中，将网页打包成可执行程序（*.exe）是一种常见的需求，这通常用于创建离线版的Web应用程序或者让非技术用户更方便地访问特定网页。本教程将详细讲解如何实现这一过程，无需复杂的编程知识，简单...
基于Node.js的跨平台桌面应用设计源码：nw.js详解
10-04
其中，HTML文件用于构建应用的用户界面，JSON文件被用于数据交换，JavaScript文件自然扮演了程序逻辑的执行者，而C/C++文件则可能包含了更为底层的系统操作或性能优化代码。XUL文件通常与Firefox浏览器相关，表明...
nwjs-game:使用NW.js的基于画布HTML5游戏
05-26
开发者可以使用NW.js提供的工具将这些内容打包成可执行的桌面应用程序，以便在不同平台上分发和运行。 通过这个项目，开发者可以学习到如何结合NW.js、JavaScript和HTML5画布来构建桌面游戏，同时理解Web技术在桌面...
从零开始的nwjs(0.69.1)打包生成exe（防坑）
qq_43805885的博客
10-24 2213
nw生成exe 避了很多坑，希望对第一次上手nwjs的大家有用
nw.js打包桌面程序
weixin_44389116的博客
06-28 1216
点击process按钮，等待完成后关闭，nwjs文件夹内会生成cxj_boxed.exe文件，该exe文件为最终打包完成的桌面程序。同时选中index.html和package.json，右键添加压缩为cxj.zip，压缩后文件修改zip后缀为nw。将nwjs文件夹下除cxj相关文件（除cxj文件夹、cxj.exe、cxj.nw的其他文件）添加到空白框。nwjs文件下，新建文件夹cxj，cxj文件夹中 新建index.html、package.json。将cxj.nw移到nw.exe所在目录。
nw.js项目如何打包成可安装exe
maqiangleader的博客
03-26 1192
nwjs打包成安装程序exe详细篇，谁看谁会。。。
nw.js 简单 创建 一个.exe包
星空
06-21 842
配置的打包平台，进行打包，打包完最终文件会在项目目录下。这个是nwjs版本，请选择适合您的版本。在文件夹新建文件夹命名为。页面,页面内容随意。
NW.JS的安装与打包
u013288292的博客
10-25 2万+
NW.JS的安装与调试NW.JS的安装，打包与调试，个人总结NW.JS的安装与打包生成可执行的.exeNW.JS的开发工具与调试如何改变文本的样式导出与导入导出导入 NW.JS的安装，打包与调试，个人总结 为了防止自己忘记，经过网上的一些资料参考并结合自己的实验，在这里记录一下NW.js的安装与调试步骤。 NW.JS的安装与打包 前往NW.js中文网：https://nwjs.org.cn/ ，我...
NW.js 将前端项目打包为 exe
浮小夏的博客
08-06 1598
NW.js 将前端项目打包为 exe 1 官网下载 NW.js [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bYBEL1rX-1628157712182)(C:\Users\胡梦科技\AppData\Roaming\Typora\typora-user-images\image-20210804093923860.png)] 2 打包 2.1 普通文件 2.1.1 第一种方式 在下载的文件夹根目录中新建 NW.js 文件夹和 package.json。 [外链图片转存失
nw.js 将html打包为exe
weixin_65549694的博客
05-27 2258
1、下载nw和Enigma Virtual Box nw.js Enigma Virtual Box 2、在入口html文件同级，添加package.json文件，添加内容 package.json内容（简单打包这就够用了） { "main": "index.html", "name": "这里随便起" } 想要其他的内容可以百度搜一下，这是我搜到的一些，我没用到 title : 字符串，设置默认 title。 width/height ...
nw.js 项目实现双击自定义的header全屏和还原切换，并且全屏和还原图标切换
baidu_30907803的博客
04-25 2151
如上图所示的header是自定义的。点击放大后是图标需要根据点击事件更改图标。但是如果是直接双击header空白处，窗口可以实现放大还原，但是怎么控制图标也更换？直接上代码'''sh//最大窗口/还原窗口点击事件 function maxWindow() { if (!isMax) { win.maximize(); } else { win.res...
为什么使用nw.js将html打包成exe后打开显示无法访问文件
04-02
<think>好的，用户的问题是关于nw.js打包HTML成exe后出现“无法访问文件”的错误。我需要先分析可能的原因，然后根据提供的引用资料找到解决方案。首先，用户可能没有正确配置入口文件。根据引用[1]，main字段在package.json中必须指向正确的JS或HTML文件。如果路径不对，可能导致无法加载资源。其次，打包后的文件路径可能没有调整，引用[2]提到需要修改main.js中的loadFile路径为打包后的dist目录。另外，资源文件如locales可能没有被正确包含，引用[4]指出在Inno Setup中需要正确配置文件夹和文件，尤其是递归子目录。还有图标替换可能导致的问题，但用户的问题更可能和路径有关。最后，权限问题或杀毒软件拦截也是可能的原因，需要检查。综合这些因素，应该分步骤检查配置文件和资源路径，确保所有依赖文件都被正确打包。同时，代码中的相对路径可能需要调整，使用__dirname来确保正确解析。需要提醒用户检查这些方面，并参考相关的引用资料进行修正。</think>### nw.js 打包后‘无法访问文件’问题的原因及解决方案 #### 一、主要原因分析 1. **入口文件配置错误** 未在`package.json`中正确指定入口文件路径，或打包后未同步修改路径。 示例错误配置： ```json "main": "./src/main.js" // 实际打包后文件结构变化导致路径失效[^1] ``` 2. **资源文件未正确包含** 本地化文件（如`locales`目录）、静态资源未加入打包配置： ```ini ; Inno Setup 脚本若未包含关键资源 [Files] Source: "locales\*"; DestDir: "{app}\locales"; Flags: ignoreversion recursesubdirs # 缺少此配置会导致语言包缺失[^4] ``` 3. **路径引用方式错误** 代码中使用相对路径而未考虑打包后的文件层级： ```js // 错误方式 mainWindow.loadFile('index.html') // 正确方式（假设打包后文件在dist目录） mainWindow.loadFile(path.join(__dirname, './dist/index.html'))[^2] ``` #### 二、具体解决方案 1. **修正package.json配置** ```json { "name": "nw-app", "main": "./dist/index.html", // 显式指定HTML入口 "scripts": { "build": "nwbuild --platforms win64 ./src" } } ``` 2. **完善打包配置文件**（以Inno Setup为例） ```ini [Files] ; 包含所有必须文件 Source: "dist\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs Source: "node_modules\*"; DestDir: "{app}\node_modules"; Flags: recursesubdirs Source: "locales\*.pak"; DestDir: "{app}\locales"; Flags: ignoreversion ``` 3. **代码路径优化**（使用绝对路径） ```js const path = require('path'); // 加载窗口时使用 mainWindow.loadFile(path.resolve(__dirname, 'index.html')); // 加载本地资源时 fetch(path.join(process.cwd(), 'data.json')); ``` 4. **验证文件完整性** 通过ResourceHacker检查最终exe包含的文件结构[^4]： ``` 1. 打开生成的exe文件 2. 查看是否包含html/css/js等资源文件 3. 检查版本信息等元数据 ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值