一、前言
公司最近的项目实施过程中遇到了个很头疼的问题，甲方的电脑有60%的XP系统，且并不愿意进行升级，原来使用electron开发的桌面程序无法运行在XP上，没办法，只得兼容或者寻找替代品；经过搜索和询问后，决定使用nw.js；
二、初始化项目
运行环境：
node 10.15.3
vue 2.9.6
- 首先，我们初始化一个webpack模板的vue项目；
vue init webpack helloworld
- 添加nw.js的开发依赖（这里我选择0.14.7的原因是它支持XP系统，如果不需要请安装最新版）；
cd helloworld
npm install nw@0.14.7-sdk --save-dev
三、使应用以nw启动
效果图：
nw.js本地启动.gif
- 修改package.json文件，在dev命令最后添加
--open nw；
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open nw",
"start": "npm run dev"
}
--open表示服务器启动后运行浏览器，这里我们使用nw.js，所以后面跟上nw，如果不加nw或指定其他浏览器（如google chrome），则会打开默认或指定的浏览器；
- 添加下面的代码，指定入口；
"main": "http://localhost:8080/"
现在运行npm run dev即可以正常的打开项目；
四、配置打包
效果图：
nw.js打包启动.gif
nw.js官方文档里提供了几种打包方式，这里我使用的是nwjs-builder-phoenix进行自动化打包，需要进行如下配置；
- 添加
nwjs-builder-phoenix到开发依赖；
npm install nwjs-builder-phoenix --save-dev
-
修改config/index.js，将全部的
assetsPublicPath:'/'替换为assetsPublicPath: ''，避免打包后加载不到资源； -
添加nwjs-builder-phoenix打包的选项到package.json；
"build": {
"files": [
"dist/**/*"
],
"output": "./releases",
"nwVersion": "0.14.7",
"nwPlatforms": [
"win"
],
"nwArchs": [
"x86"
],
"overriddenProperties": {
"main": "./dist/index.html"
}
}
这里的配置中，overriddenProperties指定了main在打包后的值，使得打包后可以正常加载；
-
如需要修改图标或者设置其他选项，请参照：nwjs-builder-phoenix-options；
-
添加打包命令；
"dist": "npm run build && build --tasks win-x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
- 打包发行；
npm run dist
打包后会输出到package.json中build.output设置的文件夹下；
五、一些吐槽
- nw.js官方的文档挺烂的；
- 其实网上有不少现成的教程、种子项目、模板，但还是选择这样从头开始，也算是学习一下基础的东西；
- 特别感谢不爱吃西红柿的鱼、elegantweb/nwjs-vue@github提供的思路；
网友评论