- Vite项目build后路由404了？你可能漏了这个小配置*
引言
如果你使用Vite构建过单页应用（SPA），可能会遇到一个令人头疼的问题：开发环境下路由一切正常，但构建（build）后部署到生产环境，刷新页面或直接访问子路由时却返回404。这个问题看似简单，但背后的原因和解决方案却值得深入探讨。本文将详细分析这一问题的成因，并提供多种解决方案，帮助你在Vite项目中彻底解决路由404的困扰。
为什么会出现路由404？
1. SPA的路由机制
在单页应用中，路由是由前端JavaScript控制的。当我们访问应用的根路径（如/）时，服务器会返回index.html，然后前端路由库（如Vue Router或React Router）会根据URL路径渲染对应的组件。然而，当用户直接访问子路由（如/about）或刷新页面时，服务器会尝试寻找/about对应的文件，但该文件并不存在（因为SPA只有一个index.html），于是返回404。
2. Vite的默认行为
Vite的开发服务器（vite dev）默认支持SPA的路由回退（fallback），即任何未知路径都会返回index.html。然而，生产构建（vite build）生成的是一组静态文件，部署到生产环境时，服务器默认不会自动处理这种回退逻辑。
解决方案
1. 配置服务器路由回退
解决路由404问题的核心是让服务器将所有未知路径重定向到index.html。以下是常见服务器的配置方法：
Nginx
nginx
server {
listen 80;
server_name yourdomain.com;
location / {
root /path/to/your/dist;
try_files $uri $uri/ /index.html;
}
}try_files指令会依次尝试匹配$uri（请求的文件）、$uri/（目录）和最后的/index.html，确保任何路径都返回index.html。
Apache
apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>Netlify
在netlify.toml中添加：
toml
[[redirects]]
from = "/*"
to = "/index.html"
status = 200Vercel
在vercel.json中添加：
json
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}2. 使用Vite的base配置
如果你的应用部署在子路径（如https://yourdomain.com/subpath/），需要在vite.config.js中设置base选项：
js
export default defineConfig({
base: '/subpath/'
});同时，确保前端路由库（如Vue Router）也配置了相同的base：
js
const router = createRouter({
history: createWebHistory('/subpath/'),
routes
});3. 使用vite-plugin-rewrite-all插件
如果你无法控制服务器配置，可以使用插件在构建时生成所有路由的index.html副本：
bash
npm install vite-plugin-rewrite-all --save-dev配置vite.config.js：
js
import rewriteAll from 'vite-plugin-rewrite-all';
export default defineConfig({
plugins: [rewriteAll()]
});这会为每个路由生成一个目录和index.html文件（如/about/index.html），兼容不支持回退的静态托管服务。
深入探讨：哈希路由 vs 历史路由
1. 哈希路由（Hash Mode）
哈希路由（如https://yourdomain.com/#/about）通过URL的哈希部分（#）实现路由切换，不会触发服务器请求。因此，哈希路由不会出现404问题，但对SEO不友好且URL不够美观。
2. 历史路由（History Mode）
历史路由（如https://yourdomain.com/about）依赖HTML5的history.pushState API，需要服务器支持回退到index.html。虽然URL更友好，但必须配置服务器。
如果你的项目对SEO要求不高或无法配置服务器，可以考虑切换为哈希路由：
js
const router = createRouter({
history: createWebHashHistory(),
routes
});常见陷阱与调试技巧
1. 静态资源路径问题
如果base配置不正确，可能导致静态资源（JS、CSS）加载失败。可以通过以下方式调试：
- 检查构建后的
index.html中资源路径是否正确。 - 使用浏览器开发者工具查看资源加载的完整URL。
2. 服务端渲染（SSR）的混淆
本文讨论的是SPA的路由问题。如果使用SSR（如Nuxt.js），路由由服务器处理，不需要配置回退逻辑。
3. 测试生产构建
使用vite preview命令可以本地测试生产构建的行为：
bash
vite build && vite preview总结
路由404问题是Vite项目构建后的常见挑战，但通过正确的服务器配置、base设置或插件支持，可以轻松解决。关键在于理解SPA的路由机制和服务器回退逻辑。希望本文的深入分析和多种解决方案能帮助你彻底摆脱这一问题的困扰！