nginx / router deep URLs not working on server

[adamprocter]

I have an app that with localhost works great when visiting various routes but I always hit a 404 when I try to run it on my CentOS box, everything else works as expected but I cannot visit the longer URL route direct as I can local host and as I want

http://localhost:5173/partone/parttwo - works
but when on https://subdomain.myserver.com/partone/parttwo - gets a 404

I have added this as an NGINX route

server {
    listen      443;
    server_name subdomain.myserver.com;    
    charset utf-8;
	ssl_certificate /usr/local/psa/var/modules/letsencrypt/etc/live/subdomain.myserver.com;/cert.pem;
	ssl_certificate_key /usr/local/psa/var/modules/letsencrypt/etc/live/subdomain.myserver.com;/privkey.pem;
	ssl_protocols SSLv3;
    root    /var/www/vhosts/subdomain.myserver.com;
    index   index.html;
    #Always serve index.html for any request
    location / {
        root /var/www/vhosts/subdomain.myserver.com;
        try_files $uri  /index.html;
    }    

}

Any tips would be much appreciated - do I need to more in the router stuff

This is the Router

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/:partone_id/:parttwo_id',
      name: 'parttwo',
      component: () => import('../views/MyView.vue')
    }
  ]
})

export default router

[ZouJiu1]

this is my answer, it may be helpful https://stackoverflow.com/a/79302293/17601704

In vue router 4 for vue3

first

try to find the mounted APP.vue, when you refresh the webpage, the App.vue will be loaded firstly. So make sure you don't mounted this.$router.push("/")

  mounted() {
     this.$router.push("/");
}

the correct thing

mounted() {
    this.loading();
},
methods: {
  loading() {
    if(document.URL=="http://localhost:9000/" || document.URL=="https://zoujiu.com.cn/"
          || document.URL=="http://zoujiu.com.cn/" || document.URL=="http://localhost:9000/#/"
          || document.URL=="http://zoujiu.com.cn/#/"|| document.URL=="https://zoujiu.com.cn/#/"
        ) {
          this.$router.push({ path: '/'});
        }
  }
}

deployment

I use this history with nginx ssl https

const router = createRouter({
  // history: createMemoryHistory(),
  history: createWebHashHistory(),
  // history: createWebHistory(),
  routes:constantRoutes,
})

development

I use this history

const router = createRouter({
  // history: createMemoryHistory(),
  // history: createWebHashHistory(),
  history: createWebHistory(),
  routes:constantRoutes,
})

this is myown website http://zoujiu.com.cn.