Setup nginx conf for single-page routing

Dockerfile

@@ -1,4 +1,5 @@
 FROM nginx:latest
 
 COPY dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/nginx.conf
 

nginx.conf

@@ -0,0 +1,15 @@
+worker_processes 4;
+
+events { worker_connections 1024; }
+
+http {
+    server {
+        listen 80;
+        root  /usr/share/nginx/html;
+        include /etc/nginx/mime.types;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}

src/App.vue

@@ -11,7 +11,8 @@ import { MathPage } from './support/page'
 
 <template>
   <div id="nav">
-    <router-link to="/">Home</router-link>
+    <router-link to="/">Home</router-link> |
+    <router-link to="/scratch">Scratch Testing</router-link>
   </div>
   <router-view/>
 </template>

src/components/Scratch.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <p>Scratch page for testing!</p>
+</template>

src/router.ts

@@ -7,6 +7,11 @@ const routes = [
         name: 'Home',
         component: Home,
     },
+    {
+        path: '/scratch',
+        name: 'Scratch',
+        component: () => import(/* webpackChunkName: "scratch" */ './components/Scratch.vue'),
+    },
 ]
 
 const router = createRouter({