如何利用nw.js打包vue项目
引言
最近有一个开发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
- 可能不叫vue.config.js文件，可能是在config/index.js中
- 可能不叫publicPath，可能是base或者assetsPublicPath，但是都是修改为 ‘./’
原文地址：https://blog.csdn.net/m0_73431159/article/details/142403217
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！