必须把_redirects放进构建产物根目录,否则Netlify完全无视——它只扫描dist/或public/顶层,不递归查找,也不认.redirects、_redirects.txt或src/_redirects;Vue CLI需用CopyPlugin显式复制,Vite需在rollupOptions中加copy插件;/* /index.html 200是SPA fallback核心规则,要求路径以/开头、空格严格、顺序靠后,且动态路由需按构建产物实际文件名精确映射。

必须把 _redirects 放进构建产物的根目录,否则 Netlify 完全无视它——这不是配置问题,是文件根本没被扫描到。
为什么 _redirects 文件放错位置就失效
Netlify 只在最终部署目录(比如 dist/ 或 public/)的最顶层扫描 _redirects。它不递归查找,也不认 .redirects、_redirects.txt 或 src/_redirects。
- Vue CLI 用户:默认不会复制该文件,需在
vue.config.js的configureWebpack中用CopyPlugin显式拷贝 - Vite 用户:得在
build.rollupOptions.plugins里加copy插件,并指定源为项目根、目标为dist/ - 手动构建后,务必
ls dist/_redirects确认文件真实存在——别只看本地开发目录
/* /index.html 200 这行规则的写法和陷阱
这是 SPA fallback 的核心规则,但它不是重定向,而是服务端重写:所有不匹配真实文件的请求,都返回 index.html 内容,状态码仍是 200。
- 空格不能少:
/*和/index.html之间、/index.html和200之间都必须有且仅有一个空格 - 路径必须以
/开头,写成** /index.html 200或^.*$ /index.html 200全部无效——Netlify 不支持正则 - 顺序决定命运:规则从上到下匹配,第一条命中即停;若把它放在最前,后面写的
/api/* https://backend.example.com/:splat 200就永远不生效
动态路由(如 /post/:id)怎么配才不 404
纯 /* /index.html 200 对静态生成的动态页(如 Gridsome/Nuxt 输出的 /post/_id.html)无效——用户访问 /post/123,你得明确告诉 Netlify 去读哪个文件。
立即学习“前端免费学习笔记(深入)”;
- 先确认构建产物里是否存在对应 HTML:比如
dist/post/_id.html,不存在说明生成逻辑或插件配置有问题 - 在
_redirects中加一行:/post/:id /post/_id.html 200—— 注意是:id占位符,不是:splat,Netlify 会自动捕获并透传值 - 多个段要写全:
/user/:userId/post/:postId→/user/_userId/post/_postId.html,中间的/post/不能省
常见错误现象和快速自查点
刷新页面直接报 404?不是代码 bug,大概率是这三处之一断了链:
- 构建后
dist/下没有index.html:Netlify 只认根目录或public/下的index.html,其他路径一律忽略 -
_redirects文件名拼错(比如多了一个点)、扩展名多余(比如_redirects.txt)、或压根没被复制进dist/ - 用了
history.pushState却没配 fallback,用户从外链进入或手动刷新时,请求发给服务器,而服务器没返回index.html—— 前端 JS 根本没机会执行
最常被忽略的复杂点:动态路由规则必须与构建工具生成的实际文件名严格对应;:id 占位符能捕获值,但不会帮你做文件名转换——如果构建输出的是 /post/123.html 而不是 /post/_id.html,那这行重写就毫无意义。



















