利用するnpm

vueのテンプレート作成
https://github.com/vuejs/vue-cli

node.jsのアプリケーションをデスクトップアプリに
https://github.com/GoogleChromeLabs/carlo

デスクトップアプリのパッケージ化
https://github.com/zeit/pkg

vue-cliのインストール

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

vue-cliを使ってvueのテンプレートを作る

設定値はお好みで。詳細な内容は以下を参考に
https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2

carloのインストール

npm i carlo
# OR
yarn add carlo

作成されたvueのアプリケーションのrootディレクトリ配下に以下のindex.jsを配置


const carlo = require("carlo");

(async () => {
  // Launch the browser.
  const app = await carlo.launch();

  // Terminate Node.js process on app window closing.
  app.on("exit", () => process.exit());

  // Tell carlo where your web files are located.
  app.serveFolder(__dirname);

  // Expose 'env' function in the web environment.
  await app.exposeFunction("env", _ => process.env);

  app.serveFolder(__dirname + "/dist"); // vueアプリケーションがバンドルされるディレクトリを指定
  app.serveFolder(__dirname + "/node_modules", "node_modules");

  // Navigate to the main page of your app.
  await app.load("index.html");
})();

pkgをインストール

npm install -g pkg
# OR
yarn global add pkg

package.jsonにpkgの設定を追加

"bin": "index.js",
"pkg": {
  "scripts": ["dist/js/*.js"],
  "assets": ["dist/**/*"]
}

vueアプリをbuild

yarn build

アプリケーションをパッケージ化

pkg .

これでlinux、mac、win用の実行ファイルが作成されます。

<vue createで指定したアプリ名>-linux
<vue createで指定したアプリ名>-macos
<vue createで指定したアプリ名>-win.exe

私の手元で上記ファイルはだいたい30MB〜40MBなので、electronなどで作成されたアプリと比べればかなりサイズは小さいのではと思います。

Carlo、vue-cli、pkgを使ってvueを使ったデスクトップアプリケーションを作る