使用nw.js将网址打包生成exe可安装程序支持xp系统

说明:
查了很多资料,都是将本地代码打包,且都有头无尾,所以将自己的打包经过写一个完整教程。

注:(本文是将网址【例:www.baidu.com】打包成一个可安装的exe文件)

一:安装前准备程序
1:nodejs【作用:nw及npm命令都需要在该环境下运行】

2:nw.js【版本:0.14.7(该版本及以前版本才支持xp系统),作用:将网址打包成可执行程序】

3:Resource Hacker【更换原始图标】

4:Inno Setup【版本:5.*及以下中文版(版本6以上版本不支持win32电脑),作用:将可执行程序打包生成一个exe可安装程序】

二:安装流程
1:下载安装nodejs。
nodejs下载下载安装即可】

【参考文档:外部教程
验证:
【node -v】
【npm -v】

2:安装nw.js
执行命令:
【npm install nw@0.14.7-sdk】
【npm install nwjs-builder-phoenix】

下载nw.js得到一个nw.js文件夹
在nw.js\nwjs-tools\nwjs-sdk-v0.14.7-win-ia32目录下找到或新建package.json文件并修改如下

{
    "name": "test",
    "version": "1.0.0",
    "description": "shelluni test",
    "main": "http://www.test.cn",
    "icon":"logo.icon",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build:nw:all": "build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
      "build:nw": "build --tasks win-x86 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
      "serve:nw": "nw"
    },
    "window": {
      "icon":"logo.icon",
      "width": 1600,
      "height": 800,
      "min_width": 1366,
      "min_height": 768
    },
    "build": {
      "icon":"logo.icon",
      "output": "./releases",
      "nwVersion": "0.14.7",
      "nwPlatforms": [
        "win"
      ],
      "nwArchs": [
        "x86"
      ],
      "targets": [
        "zip"
      ]
    },
    "author": "应用程序",
    "license": "ISC",
    "devDependencies": {
      "nw": "^0.14.7-sdk",
      "nwjs-builder-phoenix": "^1.15.0"
    }
  }

    

3:替换图标:
【教程:外部教程
备注:需替换两处,nw.exe和nw.dll

4:生成可执行程序(cmd切换到nwjs-sdk-v0.14.7-win-ia32目录下)
【npm run serve:nw】运行程序
【npm run build:nw】生成程序

1):生成程序会在nw.js\nwjs-tools\nwjs-sdk-v0.14.7-win-ia32目录下生一个新目录releases

2):releases目录有test-1.0.0-win-x86目录和test-1.0.0-win-x86.zip

3):删除test-1.0.0-win-x86目录下的pnacl和node_modules两个目录(删除无用数据,减少程序大小,目前测试无影响)

5:打包可执行程序
打包程序下载链接可参考】
外部教程教程可参考】

1):应用程序主执行文件:nw.js\nwjs-tools\nwjs-sdk-v0.14.7-win-ia32\releases\test-1.0.0-win-x86下的可执行exe程序

2):其他应用程序文件目录:nw.js\nwjs-tools\nwjs-sdk-v0.14.7-win-ia32\releases\test-1.0.0-win-x86

3):安装语言:中文简体或chinese simp

使用 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、付费专栏及课程。

余额充值