nw.js将web程序打包成exe可执行文件的方法

 1.下载nw

        下载 NW.js(官网:NW.js),选择normal的即可,下载完成之后解压。

2.导入web项目

2.1解压后的文件夹如下图所示,其中myapp(名字随便起)里面放的是自己的前端项目。

2.2myapp示例内容如下(实际就是一个web的项目文件)

2.3package.json可以理解为应用的配置文件,是必须要有的;index.html作为应用的入口文件,内容和一般网页类似,名字可以按自己喜好起,但是一定要和配置中的“main”参数设置一致;

2.4其中window里面配置的是程序执行后的窗口配置,相关参数如下所示:

  • title : 字符串,设置默认 title。
  • width/height : 主窗口的大小。
  • toolbar : bool 值。是否显示导航栏。
  • icon : 窗口的 icon。
  • position :字符串。窗口打开时的位置,可以设置为“null”、“center”或者“mouse”。
  • min_width/min_height : 窗口的最小值。
  • max_width/max_height : 窗口显示的最大值。
  • resizable : bool 值。是否允许调整窗口大小。
  • always-on-top : bool 值。窗口置顶。
  • fullscreen : bool 值。是否全屏显示。
  • show_in_taskbar : 是否在任务栏显示图标。
  • frame : bool 值。如果设置为 false,程序将无边框显示。
  • "chromium-args" :"-allow-file-access-from-files" 相当于给谷歌浏览器添加启动参数一样,这行代码允许angularjs直接访问本地json文件。

3.运行程序

将应用程序目录拖放到nw.exe即可运行;

4.打包成exe文件

  • 将myapp里面的文件压缩成zip文件,然后将文件名改成app.nw;
  • 将app.nw放在和nw.exe同一个目录下(即最外层);
  • 从nw.exe文件所在的目录进入cmd控制台,执行以下命令;
copy /b nw.exe+app.nw app.exe
  • 然后就出现了app.exe可执行文件
  • 可以新建一个文件夹,把必须的文件放里面,如下为app.exe执行必须的文件:

生成app.exe文件之后,将多余的文件删除,保留上面这些文件即可,上面这些文件是app.exe执行所需要的必须的文件;

至此,nw.js将web程序打包成exe可执行文件结束。

  • 25
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用 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 项目打包可执行文件的大致步骤。请根据实际情况进行调整和配置。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值