引言

最近有一个开发windows桌面应用的需求, 需要将vue项目打包成.exe文件，最好是变成可安装版(非绿色版)。特此记录一下如何通过nw.js将vue项目打包成.exe。可能这种方式不是最优，仅供大家参考！

nw.js简介（以下描述来自nw.js官网）

  NW.js基于Chromium和Node.js 。 NW.js能够通过页面技术开发桌面应用 , 同时可以调用Node.js代码以及模块 。 未来 , 你可以使用NW.js轻松将页面应用制作成桌面应用 。

下载nw.js

nw.js官网: https://nwjs.io/

第一步: 下载nw.js的sdk

第二步: 解压缩下载的zip包，目录结构如下:

第三步: 双击nw.exe(出现下图代表没错)

创建vue2项目

第一步: 在解压目录下使用cmd命令窗口

第二步: 创建vue2项目

如果你还没有安装Vue Cli，可以使用npm或yarn来安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个vue2项目（选择vue2即可）

vue create vue2     //此处vue2为项目名, 可自由取名

cmd命令窗口

浏览器访问 http://localhost:8080/ 出现以下页面表示项目创建成功

第三步: 修改vue.config.js

添加一行(不同的构建工具这里有所不同，但都是修改成‘./’):

publicPath: ‘./’

第四步: 保存后打包vue2项目

第五步: 新建文件夹package.nw

第六步: 将 vue2/dist/ 目录下的文件拷贝到 package.nw 中

第七步: 在package.nw目录下新建package.json文件, 编写如下代码

{
	"name": "vue2",
	"main": "index.html"
}

第八步: 将package.nw目录拖至 nw.exe 上(这就是运行)，出现y以下结果表示没问题

第九步: 生成 vue2.exe (绿色版完成)

双击vue2.exe出现第八步的结果表示成功

将这个文件夹压缩发送给别人便是一个绿色版软件

第十步: 制作下载程序

制作前需要下载一个软件 --> InnoSetup
我下载的网址: https://pc.qq.com/detail/13/detail_1313.html
工具资源已上传，也可按需自取

然后弹出两个框，点击是，然后选择文件路径

生成了一个文件夹和一个文件

完结

可将Output文件夹里面的.exe发送给其他人，便可以安装使用了。

注意: vue3或者其他构建vue的方式 同理，区别在 第三步: 修改vue.config.js

1. 可能不叫vue.config.js文件，可能是在config/index.js中
2. 可能不叫publicPath，可能是base或者assetsPublicPath，但是都是修改为 ‘./’