Vite生产应用程序页面导航在html网站中失败

我在Vercel中部署了我的网站,但当我从主页导航到其他页面时,它无法在生产中加载,但在本地机器中加载就可以了

这是我的页面结构

project-root
│
├── vite.config.js
│
├── index.html
│
├── src
│   ├── pages
│   │   ├── photos
│   │   │   ├── photos.html
│   │   │   └── photo_detail.html
│   │   │
│   │   ├── videos
│   │   │   ├── videos.html
│   │   │   └── video_detail.html
│   │   │
│   │   ├── collections
│   │   │   ├── collection.html
│   │   │   └── collection_detail.html
│   │   │
│   │   └── favorite
│   │       └── favorite.html
│   │
│   └── other_source_files_and_directories
│
└── dist (generated during build)

Vite配置

// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        photos: resolve(__dirname, 'src/pages/photos/photos.html'),
        photosDetails: resolve(__dirname, 'src/pages/photos/photo_detail.html'),
        video: resolve(__dirname, 'src/pages/videos/videos.html'),
        videoDetails: resolve(__dirname, 'src/pages/videos/video_detail.html'),
        collection: resolve(__dirname, 'src/pages/collections/collection.html'),
        collectionDetails: resolve(__dirname, 'src/pages/collections/collection_detail.html'),
        favorite: resolve(__dirname, 'src/pages/favorite/favorite.html'),
      },
    },
  },
})

我需要404错误的解决方案,为什么会出现404错误?