基于NW.JS全屏无边框程序将HTML打包成可执行文件.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/

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要使用 NW.js 将 Vue 项目打包可执行文件exe),可以按照以下步骤进行操作: 1. 确保你已经安装了 Node.js 和 npm。可以从官网下载并安装。 2. 创建一个新的 Vue 项目,可以使用 Vue CLI 进行快速创建。在命令行中运行以下命令: ``` vue create my-nwjs-app ``` 按照提示进行配置,并选择你需要的特性和插件。 3. 进入项目目录,并安装必要的依赖项。在命令行中运行以下命令: ``` cd my-nwjs-app npm install --save-dev nw ``` 4. 在项目根目录下创建一个 `package.json` 文件,用于配置 NW.js 打包选项。示例如下: ```json { "name": "my-nwjs-app", "version": "0.1.0", "main": "index.html", "scripts": { "start": "npm run build && nw .", "build": "vue-cli-service build", "package": "npm run build && nwbuild -p [PLATFORMS]", "dev": "nw ." }, "devDependencies": { "nw": "^0.51.3", "nw-builder": "^3.1.2" } } ``` 其中,`start` 命令用于启动开发模式下的 NW.js,`build` 命令用于构建 Vue 项目,`package` 命令用于打包 Vue 项目可执行文件。 5. 在命令行中运行以下命令,安装 `nw-builder` 工具: ``` npm install --save-dev nw-builder ``` 6. 在命令行中运行以下命令,打包 Vue 项目可执行文件exe): ``` npm run package ``` 根据你的需求,可以在 `package` 命令中指定目标平台(如 Windows、macOS、Linux)。 打包后,你将在项目目录下的 `build` 文件夹中找到生可执行文件。 以上就是使用 NW.js 将 Vue 项目打包可执行文件的大致步骤。请根据实际情况进行调整和配置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值