はじめに
vue.jsのプロジェクトはデフォルトだと、URLにハッシュが付く（例： http://localhost/#/abc ）が、それをやめて、直接指定URL（例： http://localhost/abc ）にしたものをサーバーで公開する方法についてです。
catch-allフォールバックしていない状態で、サーバーに公開すると404になると思うので、それの回避策でもあります。
背景
vue routerの公式ページのNative Node.jsにやり方が書いてあったが、それだと動かず、Node.js (Express) でやったが、やり方の説明が簡潔すぎてすぐ出来なったので、この記事に残しておこうと思いました。。
→ vue.js のgithubにプルリクエスト中
やり方
vue.jsの自分のプロジェクトをプロダクションビルド
npmだったら
$ npm run build
とかだとおもいます。これで distフォルダにビルドしたvue.jsプロジェクトが展開されると思います。
node.jsのプロジェクト作成
適当なフォルダを作って、そこにnpmプロジェクトを作ります。
$ mkdir express_project
$ npm init
色々聞かれますが、適当にenterしていきます。
その後、
さきほどビルドしたvue.jsの distフォルダを このexpress_project内にコピーします。
Expressなどインストール
Webサーバー用にExpress、catch-allフォールバック（404をindex.htmlで処理する）用にconnect-history-api-fallbackをインストール
$ npm i express connect-history-api-fallback -s
node.jsのコードを書く
catch-allフォールバックしながら、distフォルダを3000ポートでListenするためのコードを最小限で書く。
$ vim express_project/app.js
const express = require('express')
const history = require('connect-history-api-fallback')
const app = express()
const server = app
.use(history())
.use(express.static('dist'))
.listen(3000, () => {
console.log('Node.js is listening to PORT:' + server.address().port)
})
この時点でexpress_projectフォルダ内は下記の様な感じになっていると思います。
express_project
├── dist
│ ├── index.html
│ └── static
├── app.js
├── node_modules
├── package-lock.json
└── package.json
実行
$ node app.js
これで、
http://localhost:3000/abc
でも意図したものが表示されると思います。
