前言
在前端开发中，我们经常面对桌面应用和 web 应用之间的选择。很多时候，我们需要把一个 web 应用转换成桌面应用，这时候使用 nw.js 无疑是一个不错的选择。
nw.js 是一个基于 Chromium 的开源框架，它可以让你使用前端的 web 技术开发桌面应用，支持常规的前端文件格式，比如 HTML、CSS、JS 等。
本文将介绍如何使用 vue-cli-plugin-nwjs 这个 npm 包来方便地将一个 vue 应用打包成桌面应用。
安装
首先，你需要安装 nw.js 和 vue-cli：
npm install -g nw@latest npm install -g @vue/cli
接下来，安装 vue-cli-plugin-nwjs：
vue add nwjs
安装过程中，你需要输入一些配置选项，包括应用名称、版本号、输出目录等等。
使用
安装完毕后，你可以使用以下命令将你的 vue 应用打包成桌面应用：
npm run nw
这个命令会将你的应用打包成 nw.js 所识别的格式，并将它们写入一个指定的输出目录。
在这个输出目录内部，你会看到一个可执行文件，双击它便可启动你的桌面应用。
配置
你可以在你的 package.json 文件中配置 nw.js 的相关选项，比如：
-- -------------------- ---- -------
-
------- ---------
---------- --------
------- -
------------ ---------
------------ --------- ---------
------------ ---------
----------- ----------
--------------- --------
------------ --------------------
----------- -------------------
----------- -----
---------- -----
-
-这些选项分别代表：
outputDir：输出目录。platforms：支持的平台及架构。buildType：构建类型，normal 表示普通构建，sdk 表示使用 nw.js SDK，single 表示单页面应用。buildDir：构建目录。buildVersion：应用版本号。buildIcns：App 图标文件。buildIco：Windows 图标文件。buildZip：是否将应用打包成 ZIP 文件。build7z：是否将应用打包成 7z 文件。
示例
假设我们有一个 vue 应用，它的文件结构如下：
my-app/ ├── public/ │ ├── index.html ├── src/ │ ├── App.vue │ ├── main.js └── package.json
我们可以先用 vue-cli 创建一个默认的应用：
vue create my-app
然后，我们进入 my-app 目录，安装和配置 vue-cli-plugin-nwjs，并将应用打包成桌面应用：
cd my-app vue add nwjs npm run nw
最后，我们会在 my-app/dist 目录内得到一个可执行文件，双击它便可启动我们的桌面应用。
结尾
通过使用 vue-cli-plugin-nwjs 这个 npm 包，我们可以很方便地将一个 vue 应用打包成桌面应用。希望这篇文章对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cc30d0927023822835