我已经设置了一个简单的 vanilla JS SPA webapp，但一直无法弄清楚如何解决一些路由问题，我希望可以通过适当的 vercel.json 配置或类似配置来解决。
网站在这里：https://kor.nz/
网站代码公开在这里：https://github.com/kormyen/home
我不得不打破下面的 URL，因为 StackOverflow 说“你的问题似乎是垃圾邮件。”
你会看到这个目录深层 URL 有效：kor_nz/projects 然而，这两个目录深层 URL 不会加载：kor_nz/projects/home
您可以成功地从第一个到 URL 中的任何一个路由到第三个，但不能刷新、在新选项卡中打开或单击指向第三个的链接。
我可以看到，通过两个目录深层 URL kor_nz/projects/home，它正在为每个文件请求提供 index.html 的内容，而不是它们各自的 jpg、css、js 等
我当前的半功能（上面解释的）vercel.json 文件当前是：
{
"trailingSlash": false,
"rewrites": [
{ "source": "/:path*", "destination": "/index.html" }
]
}
我尝试了几次尝试使这项工作成功，但放弃并寻求帮助:)
{
"routes": [
{
"src": "/(.*\\.(js|css|png|jpg|gif|svg|woff2?|eot|ttf|otf))$",
"dest": "/$1"
},
{
"src": "/.*",
"dest": "/index.html"
}
]
}
是一样的
{
"rewrites": [
{
"source": "/:path*.js",
"destination": "/:path*.js"
},
{
"source": "/:path*.css",
"destination": "/:path*.css"
},
{
"source": "/:path*.png",
"destination": "/:path*.png"
},
{
"source": "/:path*.jpg",
"destination": "/:path*.jpg"
},
{
"source": "/:path*.gif",
"destination": "/:path*.gif"
},
{
"source": "/:path*.svg",
"destination": "/:path*.svg"
},
{
"source": "/:path*.woff",
"destination": "/:path*.woff"
},
{
"source": "/:path*.woff2",
"destination": "/:path*.woff2"
},
{
"source": "/:path*.eot",
"destination": "/:path*.eot"
},
{
"source": "/:path*.ttf",
"destination": "/:path*.ttf"
},
{
"source": "/:path*.otf",
"destination": "/:path*.otf"
},
{
"source": "/:path*",
"destination": "/index.html"
}
]
}
是一样的
{
"rewrites": [
{
"source": "/:path((?!^_next|api).*)",
"destination": "/index.html"
}
]
}
是一样的
{
"rewrites": [
{
"source": "/:path*/:file+",
"destination": "/:path*/:file+"
},
{
"source": "/:path*/",
"destination": "/:path*/index.html"
}
]
}
适用于主页但不适用于任何目录，导致 404 响应。
我怀疑解决方案可能看起来像这样，但需要一些指示。
否则，如果我必须以不同的方式重建站点，那就太令人沮丧了，但就这样吧。
{
"rewrites": [
{
"source": "/:path*/:file+",
"destination": "/:path*/:file+"
},
{
"source": "/:path*/",
"destination": "/:path*/index.html"
},
{
"source": "/:path*//:path*/",
"destination": "/index.html"
}
]
}
你期望发生什么
我希望能够访问我网站上的任何网址，包括；
Vercel 使用名为 vercel.json 的文件进行配置。您在配置中使用的 rewrites 属性可用于指定如何处理应用程序中的不同路由。
您面临的问题似乎与您处理静态文件和重写为 index.html 的方式有关。
您一直在尝试的配置似乎假设所有路由都在根级别而不是嵌套。嵌套路径的路由问题可能是因为您正在重写对 index.html 的所有请求，包括对静态文件（js、css、图像等）的请求。
试试这个配置：
{
"rewrites": [
{
"source": "/:path*/",
"destination": "/index.html"
},
{
"source": "/:path*/:path*/",
"destination": "/index.html"
}
],
"routes": [
{
"src": "/(.*\\.(js|css|png|jpg|gif|svg|woff2?|eot|ttf|otf))$",
"dest": "/$1"
}
]
}
此配置首先将传入请求重写为 index.html，然后将所有静态文件请求路由到各自的文件。
记住，vercel.json 中规则的顺序很重要。从上到下检查路由，并使用第一个匹配的路由。所以，有必要在 index.html 重写之后放置静态文件的规则，否则所有请求都会被重写为 index.html，包括你的静态文件请求，这不是你想要的。
这应该有助于解决您的问题。如果没有，则您的代码或项目结构中可能存在导致路由问题的其他问题。