前言

目前js打包桌面程序最流行的是electron，但是這個入門交簡單文章也多，暫不贅述，electron官網地址：https://nklayman.github.io/vue-cli-plugin-electron-builder/

之所以研究nw.js是為了在使用vue的同時也能滿足xp用戶對項目的使用，之前我在nw.js入門+桌面應用程序——最易懂的教程中，也簡單介紹了nw.js把項目打包成桌面應用的使用，這次針對xp又進行了深入研究。

主要內容

1.將vue項目打包為桌面可執行程序
2.在vuecli創建的項目基礎上增加nw插件無縫轉化為桌面程序
3.可在xp系統運行
4.支持自動更新

將vue項目打包為桌面可執行程序

1.將vue項目打包生成的dist目錄下的所有文件復制到app及package.nw目錄下

注意：nw.js 支持到xp的最后版本是0.14.7版本。下載傳送門：https://dl.nwjs.io/v0.14.7/

有兩種方式 1.將dist文件夾放在app及package.nw目錄下，然后修改package.json中的main路徑，但是容易報錯；2.將dist目錄去掉把index.html和其他文件直接放在app及package.nw目錄下可以正常啟動成功。可以兩種都試試

2.將app目錄拖動至nw.exe上方運行

3.執行打包命令生成桌面軟件

copy /b nw.exe+package.nw yourname.exe

重點來啦！在vuecli創建的項目基礎上增加nw插件用命令運行程序

運行vue項目為桌面程序

1.創建vue項目 （我這里用的腳手架3）

vue create yourname // vuecli3+orvue init webpack yourname // vuecli2

2.添加nw插件依賴

cnpm install nw@0.14.7-sdk --save-dev // 官方文檔說要支持xp系統請使用0.14.7版本，不考慮xp則可安裝最新版

注意：推薦使用cnpm安裝，npm安裝基本失敗，yarn安裝也難得的不穩定！因此推薦cnpm安裝

3.運行項目 先運行vue項目，如果出現依賴錯誤，刪除node_modules目錄然后重新cnpm install即可

4.以桌面軟件的方式運行項目

在package.json中增加一行nwjs的文件入口代碼 "main": "http://localhost:8080/", // 因為nw入口可以是.html,.js和線上地址。因為是本地運行， 將main設置為你上一步中運行起來的項目地址

在package.json中scripts下增加一行腳本命令

"dev:nw": "nw",

然后在編輯器終端輸入 npm run dev:nw 即可啟動桌面版vue項目

打包vue項目為桌面程序

1.使用插件打包：nw中文網推薦nwjs-builder-phoenix（按官方推薦來吧，坑少）

cnpm install nwjs-builder-phoenix --save-dev

在package.json中scripts下增加兩行腳本命令

"build:nw": "npm run build && build --tasks win-x86 --mirror https://npm.taobao.org/mirrors/nwjs/ .", // win-x86版 "build:nw:all": "npm run build && build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .", // 打包多版本

2.在package.json中配置基本打包參數

"build": {"files": ["dist/**/*" // 文件路徑，你vue打包后的文件夾],"output": "./releases", // 輸出路徑，打包后的軟件輸出位置"nwVersion": "0.14.7", // 跟你下載的nw版本匹配"nwPlatforms": ["win" // 平臺],"nwArchs": ["x86" // 和上面打包命令后面的版本參數匹配],"overriddenProperties": {"main": "./dist/index.html" // 設置軟件入口文件，其實這里可以是一個網址},"targets": ["zip" // 打包成zip格式，自動更新用的到] },

3.修改vue.config.js，將打包路徑設置為相對路徑,cli2版本不再贅述

module.exports = {publicPath: '/',productionSourceMap: false, }

4.完成這三步之后，在終端運行

npm run build:nw

生成打包后的桌面軟件文件夾。找到里面的your name.exe然后雙擊運行即可。

如果無需支持xp，將--tasks win-x86改成--tasks win-x64，nwArchs內的x86改成x64即可

一句話搞定自動更新

常見問題（踩坑）

1.vuecli3+默認的路由模式為history，使用nw打包后會報錯，將router.js中的mode: history注釋即可。

自動更新原理：

如果將build/overriddenProperties/mian的值設置為服務器上的外網地址，這樣每次更新只需要更新服務器上的包，用戶這邊一次安裝后就無需更新。

完整配置、打包后目錄及效果

nw配置主要在package.json，完整配置如下

美化安裝程序

如果每次都發壓縮包，解壓，安裝就顯得很low ,
前面我們用nw-builder 做了 NW 的打包后，僅僅打安裝包就比較簡單了。

主要思路：用 Node.js 操作 iss 文件，再借助官方推薦的 innosetup 進行打包。

1、安裝相關依賴

cnpm install iconv-lite innosetup-compiler --save-dev

2、創建 ./config/setup.iss 打包配置文件

注意： 最好另存為 ansi 格式存 utf8 存這個文件打出來的包都是亂碼。

OutputDir={#OutputPath} OutputBaseFilename={#OutputFileName} SetupIconFile={#SetupIconFilePath} Compression=lzma SolidCompression=yes PrivilegesRequired=admin Uninstallable=yes UninstallDisplayName={#MyAppAliasName} DefaultGroupName={#MyAppAliasName}[Tasks] Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: checkedonce[Files] Source: {#SourceMain}; DestDir: "{app}"; Flags: ignoreversion Source: {#SourceFolder}; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs[Messages] SetupAppTitle={#MyAppAliasName} setup wizard SetupWindowTitle={#MyAppAliasName} setup wizard[Icons] Name: "{commondesktop}\{#MyAppAliasName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon Name: "{group}\{#MyAppAliasName}"; Filename: "{app}\{#MyAppExeName}" Name: "{group}\uninstall {#MyAppAliasName}"; Filename: "{uninstallexe}"[Run] Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent

3.、新增 ./build/setup.js

這個文件就是用來打包 windows 下安裝包的
代碼如下

const { run } = require('runjs') const chalk = require('chalk') const config = require('../vue.config.js') const rawArgv = process.argv.slice(2) const args = rawArgv.join(' ')if (process.env.npm_config_preview || rawArgv.includes('--preview')) {const report = rawArgv.includes('--report')run(`vue-cli-service build ${args}`)const port = 9526const publicPath = config.publicPathvar connect = require('connect')var serveStatic = require('serve-static')const app = connect()app.use(publicPath,serveStatic('./dist', {index: ['index.html', '/']}))app.listen(port, function () {console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))if (report) {console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))}}) } else {run(`vue-cli-service build ${args}`) }

4.出此外還要引入一些其他文件

創建一個 ./resources 文件夾，里面放上 icon 和 license，就像這樣resources目錄
用 iss 配合 makeExeSetup 使用格外遍歷，后面還有一些代碼優化 都放到

最后根據package.json配置運行命令

npm run setup

生成安裝程序

雙擊安裝即可

總結

以上是生活随笔為你收集整理的惊！使用nw.js将vue项目打包为可在xp系统运行的桌面程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。