Angular路由直接访问404求助：部署服务器后子路由无法访问

这是Angular单页应用（SPA）部署时非常常见的路由问题，我来帮你搞定！

问题根源 #

Angular的路由是客户端路由：当你从主页内部跳转时，是Angular自己在浏览器里处理路由切换，不会向服务器发请求；但直接访问website/home或者刷新页面时，浏览器会直接向服务器请求这个路径对应的物理文件——可服务器上根本没有/home这个文件或文件夹，自然就返回404了。

解决方案：配置.htaccess重写规则 #

针对Apache服务器（托管方提到的CleanURLs也指向Apache环境），我们需要通过.htaccess让服务器把所有非文件/非目录的请求都转发到index.html，交给Angular的客户端路由处理。

步骤1：在项目中创建.htaccess文件

在你的Angular项目的src目录下新建一个.htaccess文件，填入以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  # 如果请求的不是文件或目录，重写到index.html
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

步骤2：确保.htaccess被打包到dist文件夹

打开项目根目录的angular.json文件，找到projects -> [你的项目名] -> architect -> build -> options -> assets数组，把.htaccess添加进去，确保构建时会把它复制到dist目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/.htaccess"  // 新增这一行
]

步骤3：重新构建并上传

运行你之前的构建命令（注意--base-href要匹配你的网站根路径，如果是子目录部署要改成对应路径，比如--base-href /my-app/）：

ng build --prod --base-href /

然后用FileZilla把新生成的dist文件夹内容重新上传到服务器，覆盖原有文件。

额外说明 #

• 如果你的服务器是Nginx，那需要修改站点配置文件，在location /块里添加：try_files $uri $uri/ /index.html;，然后重启Nginx服务。
• 确保服务器开启了mod_rewrite模块，大部分托管商会默认开启，如果没开可以联系他们协助开启。

内容的提问来源于stack exchange，提问作者Burst of Ice