Express 5 と Vue.js のルーターを使ったアプリ

app.js(Express 5)

app.use('/spa/app', express.static(path.join(__dirname, 'app')));

routes/spa.js(Express 5)

var express = require('express');
var router = express.Router();
const path = require('path');

router.get('/', function(req, res, next) {
  res.render('spa/top');
});
router.get('/app/{*splat}', (req, res, next) => {
  res.sendFile(path.join(__dirname, '../app', 'index.html'));
});

module.exports = router;

index.js(Vue.js)

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
  {
    path: '/',
    component: HomeView
  },
  {
    path: '/about',
    component: AboutView
  }
]

const router = createRouter({
  history: createWebHistory('/spa/app/'),
  routes
})

export default router

vue.config.js(Vue.js)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/spa/app/'
})

上記のようなルーティング設定をしたアプリの場合、以下 URL でアクセスできます。

http://localhost:5000/spa/app/
http://localhost:5000/spa/app/about