After the vue project is launched with nginx, directly enter the public network and route in the url to access the path 404 problem.

Check routing configuration

import {
    
    createRouter, createWebHistory} from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Home from "@/views/Home/index.vue";
import Search from '@/views/Home/componets/Search.vue'
import Login from "@/views/User/Login.vue"
import Register from "@/views/User/Register.vue"
import Blog from "@/views/Blog/index.vue"
import Game from "@/views/Game/index.vue"
import Plane from "@/views/Game/components/Plane.vue"
import GameBody from "@/views/Game/components/GameBody.vue"

const router = createRouter({
    
    
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        // 所有不知名路徑都會跳到home
        {
    
    
            path: '/:pathMatch(.*)*',
            redirect: '/home',
        },
        {
    
    
            path: '/',
            redirect:'/home',
            component: Layout,
            meta:{
    
    showLive2d:true,showNavHeader:true},
            children: [
                {
    
    
                    path: '/home',
                    component: Home,
                    meta:{
    
    showLive2d:true,showNavHeader:true},
                    children: [
                        {
    
    
                            name: 'Search',
                            path: '/home/search/:keyword',
                            component: Search,
                            meta:{
    
    showLive2d:true,showNavHeader:true},
                        },
                    ],
                },
                {
    
    
                    path: '/login',
                    component: Login,
                    meta:{
    
    showLive2d:true,showNavHeader:true},
                },
                {
    
    
                    path: '/register',
                    component: Register,
                    meta:{
    
    showLive2d:true,showNavHeader:true},
                },
                {
    
    
                    path: '/blog',
                    component: Blog,
                    meta:{
    
    showLive2d:false,showNavHeader:true},
                },
                {
    
    
                    path: '/game',
                    component: Game,
                    meta:{
    
    showLive2d:false,showNavHeader:true},
                    children: [
                        {
    
    
                            path: '',
                            component: GameBody,
                            meta:{
    
    showLive2d:false,showNavHeader:true},
                        },
                        {
    
    
                            path: '/game/plane',
                            component: Plane,
                            meta:{
    
    showLive2d:false,showNavHeader:false},
                        }
                    ]
                },
            ]
        },
    ]
})

export default router

question

Direct domain name and routing, 404, the development environment can be accessed, 404 after going online

on-line

development environment

debug

When using the domain name to access the homepage, it can be redirected normally on the router.

solution

After checking some information on the Internet, it should be a problem with nginx.

Configure nginx

vi /etc/nginx/nginx.conf

try_files $uri $uri/ /index.html;

Restart nginx

nginx -s reload

problem solved