Angular路由本地正常，云端部署后仅首页可用问题排查求助

我太懂这种踩坑的憋屈感了！Angular作为单页应用（SPA），本地跑路由顺得不行，但一部署到服务器就翻车，核心原因是服务器不知道该怎么处理Angular的客户端路由请求——当你直接访问/about或者刷新页面时，服务器会去硬盘上找名为about的文件/文件夹，找不到就返回404错误，完全没意识到该把请求交给Angular的路由系统处理。

你已经设置了--baseHref，但这只是告诉Angular资源的基准路径，解决不了路由转发的核心问题。下面给你分两种场景的解决方案，按需选择：

方案1：快速搞定——改用Hash路由模式 #

这种方式不需要改服务器配置，适合不想折腾服务器的情况：

打开你的app-routing.module.ts，修改RouterModule.forRoot的配置，加上useHash: true：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

然后重新构建部署：

ng build --prod --baseHref "./"

之后你的路由会变成带#的格式（比如https://your-domain/#/about），#后面的内容不会发送给服务器，所有请求都会指向index.html，自然就不会有404问题了。

方案2：优雅解决——配置服务器转发规则（无Hash路由） #

如果不想用带#的路由，就需要让服务器把所有非静态资源的请求都转发到index.html。根据你使用的云端环境，对应配置：

场景A：Nginx服务器 #

修改Nginx的配置文件（比如nginx.conf），在你的站点location /块里添加try_files规则：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/angular/dist;

  location / {
    try_files $uri $uri/ /index.html; # 关键：找不到文件就转发到index.html
  }
}

场景B：Apache服务器 #

在Angular项目的dist目录下创建.htaccess文件，内容如下：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

场景C：Netlify/Vercel等Serverless平台 #

• Netlify：在项目根目录创建_redirects文件，内容：

  /* /index.html 200
  

• Vercel：创建vercel.json文件，内容：

  {
    "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
  }
  

场景D：阿里云OSS/腾讯云COS等静态存储服务 #

这类服务没有传统服务器的转发配置，你可以设置自定义404页面为index.html。当服务器找不到请求的资源时，会返回index.html，Angular就能接管路由处理了。

额外排查点 #

1. 确认baseHref的正确性：如果你的项目部署在域名的子目录下（比如https://your-domain.com/app/），baseHref应该设为"/app/"，而不是"./"。
2. 检查云端服务器的静态资源路径是否正确，确保dist目录下的所有文件都正确上传到了服务器的对应目录。

内容的提问来源于stack exchange，提问作者DonkeyBanana