Angular项目部署Netlify遇404：netlify.toml与_redirects失效及域名转换问题

一、自定义域名配置排查 #

• 先确认DNS解析是否到位：
  • 给自定义域名添加Netlify要求的DNS记录——要么是CNAME指向你的Netlify默认域名，要么是A记录指向Netlify官方IP
  • 去Netlify后台「Domain management」页面检查，确保域名状态显示「Verified」和「Active」，有红色警告就按提示修正
• 强制开启HTTPS：
  • 在Netlify后台打开「Force HTTPS」选项，避免HTTP/HTTPS切换导致跳转异常
  • 等SSL证书自动颁发完成（一般几分钟到几小时），确保域名前的锁标正常显示

二、修复netlify.toml与_redirects的404问题 #

Angular是单页应用，必须配置路由重写让Netlify正确指向index.html，两种配置方式二选一即可：

方式1：用netlify.toml #

把文件放在项目根目录，内容如下：

[build]
  command = "ng build --prod" # 换成你的实际构建命令，比如ng build --configuration production
  publish = "dist/你的项目名" # 注意替换成Angular构建后的输出目录，Angular12+可能是dist/项目名/browser

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

• 重点：publish路径必须精准，错了会导致Netlify找不到构建产物

方式2：用_redirects文件 #

把文件放在构建输出目录的根目录（比如dist/你的项目名），内容：

/*    /index.html   200

• 怕构建时丢文件？可以在angular.json的assets数组里加一行"src/_redirects"，这样构建时会自动复制到输出目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/_redirects"
]

三、清理缓存重新部署 #

• 去Netlify后台「Deploys」页面，找到最新的部署记录，点「Clear cache and deploy site」，强制重新构建部署
• 旧缓存经常会导致新配置不生效，这步别省

四、额外排查点 #

• 检查Angular路由：默认用的PathLocationStrategy才需要重写配置；如果用了HashLocationStrategy（URL带#），不需要重写
• 看部署日志：在「Deploys」页面点部署记录的「Logs」，搜「redirects」或「toml」，确认配置文件是否被正确识别加载

内容的提问来源于stack exchange，提问作者Abdelrahman Amr Attia Ewais