I have a Vue 3 app that utilizes the Composition API, Vue Router w/ history mode, Vite, Vuetify and Typescript.
When I refresh the browser on a different page, I get a 404 error, and I'm pretty confident the issue is related to not re-routing properly.

This is the explanation Google gave me:

When the browser refreshes, it sends a new request to the server for the current URL. If the server isn't set up to route all requests to the index.html file, it will return a 404 error because it cannot find a matching resource for the requested path. To resolve this, the server needs to be configured to redirect all requests to the index.html file, allowing Vue Router to handle the routing on the client side.

However, the solutions I've seen online rather confuse me or use other web servers like Apache or Nginx. My plan with this application is to eventually serve it locally from an API, so I don't think those options are applicable to me.

I've tried adding this fallback route to the Vue router:

// index.ts
{
  path: '/:pathMatch(.*)*',
  name: 'Fallback',
  redirect: '/',
}

I've also tried adding a server proxy to the vite.config.ts file. This is the preferred route I'd like to take. However, I don't fully understand how to configure it properly, and I'm not sure how to take advantage of its features.
This is what I've tried so far:

FYI: Anytime <insert port #> or <insert local IP> is used, they are replaced with actual, hard-coded values in my code

// vite.config.ts
server: {
    port: <insert port #>,
    proxy: {
      '/Overview': {
        target: 'http://<insert local IP>:<insert port #>',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/Overview/, '/'),        
      },
    },
  },

I've also seen solutions that utilize the configure property with and without the path rewrite:
rewrite: (path) => path.replace(/^\/Overview/, '/'),

// vite.config.ts
server: {
    port: <insert port #>,
    proxy: {
      '/Overview': {
        target: 'http://<insert local IP>:<insert port #>',
        changeOrigin: true,
        configure: (proxy) => {
          proxy.on('error', (err) => {
            console.log('proxy error', err)
          })
          proxy.on('proxyReq', (proxyReq, req) => {
            console.log('Sending Request to the Target:', req.method, req.url)
          })
          proxy.on('proxyRes', (proxyRes, req) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url)
          })
        },        
      },
    },
  },

I serve the app using npm run serve which is configured in the package.json file under scripts like so:
"serve": "set PORT=<insert port #> && serve dist",

My questions are:

1. How do these options differ from each other?
2. Which option (if any) should I use to correctly redirect my routes, and what is the correct way to implement it?
3. What is the purpose of using the configure property in the server proxy and how is it used above?