Vue Routerでページを更新or直接アクセス→CannotGETの対処 。Node.js(Express)の例

Vue Routerでページを更新すると

zukan画面にいるときに、ページをリロードすると

画面

Console

みたいになる。

SPAは常にindex.html一枚で処理をしている。

にもかかわらず、URLが見かけ上のzukanのPATHにアクセスしようとするため、エラーになる。

環境

	version
Node.js	v11.15.0
OS	macOS Catalina v10.15.7
プロセッサ	Intel Core i5

原因

historyを設定してURLから#を削除していると起こる。
ちなみにhistoryとは下で設定したやつ。

router.js

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  //...略

対処

#を削除しつつ、問題を解決する方法は公式サイトに解説されている。

• HTML5 History モード | Vue Router

Node.js(Express)の場合

自分が作ったものがこれだったのでもう少し詳しく。

公式にもあるように、connect-history-api-fallbackを使うと良い。

install

npm install connect-history-api-fallback

server.jsの例

app.use(history())を追加する位置に注意。
app.use(serveStatic(__dirname + "/docs"))よりも後に書くと動作しなくなった。

server.js

const express = require('express')
const serveStatic = require('serve-static')
const history = require('connect-history-api-fallback') // 追加
const port = process.env.PORT || 5000

app = express()
app.use(history()) // 追加
app.use(serveStatic(__dirname + "/docs"))
app.listen(port)
console.log('server started '+ port)