VueでURLからハッシュ("#")を削除し、リロードもできるようにする

概要

Vueアプリはデフォルトでrouterのパスに「ハッシュ(#)」が含まれています。これはrouterを「historyモード」に変更することで削除することができますが、historyモードを使用することでページをリロードした際に、404エラーが返却されてしまいます(historyモードでない場合にはこの問題は発生しません)。

しかしながら一点問題があります。シングルページのクライアントサイドアプリケーションなので、適切なサーバーの設定をしないと、ユーザーがブラウザで直接 http://oursite.com/user/id にアクセスした場合に 404 エラーが発生します。- HTML5 History モード

しかし、適切な設定をすれば「ハッシュを削除しつつ、リロードにも対応する」ことが可能となります。

Expressをインストールする

$ npm install express --save

connect-history-api-fallbackをインストールする

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

参考：connect-history-api-fallback

ルートディレクトリにserver.jsを作成する

server.js

var express = require('express');
var path = require('path');
const history = require('connect-history-api-fallback');
var serveStatic = require('serve-static');
app = express();
app.use(history());
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);

package.jsonを編集する

ルートディレクトリにあるpackage.jsonに追記します。

package.json

{
  "name": "＜プロジェクト名＞",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
+    "start": "node server.js"
  },

アプリを起動する

ルートディレクトリで次のコマンドを実行し、アプリを起動します。

$ npm run build
$ node server.js

http://localhost:5000でアプリにアクセスすると、ページをリロードしても404が返却されない、かつハッシュ記号もurlから削除されているはずです。

参考：
Vue.jsで作ったアプリをHerokuにデプロイ
vue-routerのルーティングURLからハッシュを除去しつつ、URL直接指定でも表示させる（Node, Express）