目標

Node.jsのHTTPサーバにアクセスするとVue.jsのページが帰ってくるようにしたい。

実装方法を先に解説

超絶簡単に実装できるので先に説明してしまう。

expressをインストール

npm i express

Node.js側のコード。ES6にて記述(ES6は最新版Node.jsがインストールされていれば拡張子をmjsにするだけ)

import Express from 'express'

const app = Express();
app.use(Express.static('./dist'))
app.listen(8001, () => {
    console.log('Vue.js server: http://localhost:8001')
})

Vue.js側は何の設定も必要なくビルドだけやっておく。

npm run build

するとdistフォルダが出力されるのでそれをNode.jsのmjsが置いてあるフォルダと同じ場所にコピーする。

以上でlocalhost:8001にアクセスすれば動作するはずだ。

以上！

完了である。たったこれだけで良い。

以下は興味ある人だけ読んで頂ければと思う。

Node.jsいらなくね？htmlファイル直でVue起動できればいい。

という方がいると思う。これは過去に解説しているのでそちらを参照。

【Vue.js】buildしたhtmlをダブルクリック一発で動かす！【やたら簡単】 | Blog

今回はNode.jsサーバと通信して処理を行うタイプのアプリを想定してVue.jsがそのUIとして動作する前提で記事を執筆している。

Node.js + Vue.jsが必要になるとき

例えば次のような時

1. Vue.jsによってユーザーからデータを入力してNode.jsサーバへ送信
2. Node.jsで何らかの処理を行う
3. ユーザーのVue.js側に結果を表示する

こんなことはよくあると思う。

Vue.jsの部分だけNetlifyにデプロイしてNode.jsのサーバは別で用意するなどという方法もあるが・・・

これはNode.jsのホストとVue.jsのホストが違うためセキュリティ的な懸念が生ずる(CORSの制限でそもそもアクセスができないかも)

またローカル線用のNode.jsサーバなら尚更Vue.js部分だけ外部に出すのはマズい。

さいごに

調べてみると別のサイトでAngularで全く同じことをやってるサイトもあったので需要はある手法だと思う。

またシンプルにVue.jsでローカル専用ツールを作った場合わざわざVue.jsをnpm run devした上でNode.jsを起動するのも面倒。

この方法で保存しておけば一瞬でVue.jsとNode.jsのサーバが同時起動できる。

もし必要であればやってみてほしい。