我有一个Vue SPA，在我的本地主机上，当我通过npm运行serve启动项目并尝试访问一个我没有定义的路由时，我会进入404，这是我的vue路由器配置

{
    path: '/',
    name: 'MainLayout',
    component: () => import('../layouts/MainLayout.vue'),
    meta: {
        middleware: 'translation'
    },
    children: [
        {
            path: '',
            name: 'Index',
            component: () => import('@/application/views/Index.vue')
        },
       // other routes
        {
            path: '/:catchAll(.*)',
            component: import('@/application/views/404Page.vue'),
            name: 'NotFound'
        }
    ]
},

字符串
在我的服务器上，我使用nginx与此配置，它没有，但我可以看到或在我的MainLayout中定义的组件

server {
    listen 80;
    return 301 https://$host$request_uri;
}
server {
    listen 443 ssl;
    server_name example.com;
    ssl_certificate /etc/nginx/certs/fullchain.pem;
    ssl_certificate_key /etc/nginx/certs/privkey.pem;
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

型
MainLayout.vue

<div class='w-full min-h-screen'>
    <Header class="flex-shrink-0"/>
    <router-view class="flex-grow"/>
    <Footer class="flex-shrink-0"/>
  </div>
</template>

型
我在nginx conf文件中尝试了此配置，但不起作用

server {
    listen 80;
    return 301 https://$host$request_uri;
}
server {
    listen 443 ssl;
    server_name example.com;
    ssl_certificate /etc/nginx/certs/fullchain.pem;
    ssl_certificate_key /etc/nginx/certs/privkey.pem;
    access_log /var/log/nginx/application_access.log;
    error_log /var/log/nginx/application_error.log;
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    error_page 404 /index.html;
    location = /index.html {
        root /usr/share/nginx/html;
        internal;
    }
}

型