nginx で vue プロジェクトを起動した後、パブリック ネットワークに直接入力し、URL をルーティングしてパス 404 の問題にアクセスします。

ルーティング設定を確認する

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

質問

直接のドメイン名とルーティング、404、オンラインになった後、開発環境にアクセス可能、404

オンライン

開発環境

デバッグ

ドメイン名を使用してホームページにアクセスすると、ルーター上で正常にリダイレクトされます。

解決

インターネットでいくつかの情報を確認したところ、nginx に問題があることがわかりました。

nginxの設定

vi /etc/nginx/nginx.conf

try_files $uri $uri/ /index.html;

nginxを再起動します

nginx -s reload

問題が解決しました