vue-router の ハッシュ(#) を消したい（vue-router で History API を使う）

はじめに

VueCLI で作ったアプリ実行したときの vue-router で設定される、

　　　　　　　　👆 このハッシュ(#)やめたい

環境情報：
※ VueCLI で生成してそのまま

• Node v6.11.3
• WebPack v3.6.0
• Vue,js v2.5.2
• vue-router v3.0.1

手順

1. vue-router を history モードに設定

vue-router は、初期設定でURL のシミュレート（表記）を 'hash' モードにして、SPAを実現している。
これを 'history' にすると、ハッシュ不要、history API を用いた方法でのURLシミュレートを実現できる。
モードの変換は /src/router/index.js に記載の、vue-router のインスタンス宣言のオプションに一行追記するだけ。カンタン。

/src/router/index.js

 const router = new Router({
 + mode: 'history', // enable history mode
   routes: [
    ...

2. history モードによる副作用に対処する

history モードを使用すると、ローカルで実行している webpack-dev-server に Routingが設定されていないため、アドレスバーからハッシュの無いURL (ex: http://localhost:8080/home) にダイレクトにアクセスすると404エラーが発生する。
これに対して connect-history-api-fallback Middleware をインストールして対処する。

2-1. インストール

 npm install connect-history-api-fallback --save

2-2. 実行コマンドを更新

npm-scripts の dev コマンドに--history-api-fallback を追記する

package.json

 {
   ...
   "scripts": {
    "dev": "webpack-dev-server --inline --history-api-fallback --progress --config build/webpack.dev.conf.js",
     ...

以上で、npm run dev すればOK。

---

参考：
HTML5 History モード - vue-router 公式ドキュメント
CLI: History API Fallback Option - GitHub
vue-routerのルーティングURLからハッシュを除去しつつ、URL直接指定でも表示させる（Node, Express） - Qiita