AngularJS 1.5.7页面刷新后.htaccess重定向无效，页面无法渲染

我之前维护AngularJS 1.x项目时也碰到过一模一样的情况，你的.htaccess配置已经解决了服务器层面的404问题，但页面渲染失败大概率是前端路由和资源路径的配合出了问题，咱们一步步来排查：

1. 确认<base>标签是否正确配置 #

AngularJS的路由（尤其是HTML5模式）严重依赖<base>标签解析相对路径。打开你的index.html，确保<head>里有这一行：

<base href="/">

如果应用部署在子目录（比如http://example.com/my-app/），要把href改成对应路径：

<base href="/my-app/">

这个标签没设对的话，刷新后Angular会找不到路由对应的模板或静态资源，直接导致页面空白。

2. 检查路由是否开启了HTML5模式 #

既然你用.htaccess重写路由，说明应该是开启了HTML5模式（去掉URL里的#）。打开你的Angular配置代码，确认有没有这一行：

angular.module('yourApp')
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
      // 你的路由配置...
      .otherwise({ redirectTo: '/' });

    // 开启HTML5模式，必须配合base标签
    $locationProvider.html5Mode(true);
  });

如果没开HTML5模式，.htaccess的配置反而可能干扰路由解析；如果开了但没配base标签，就会出现刷新后渲染失败的问题。

3. 调整.htaccess的RewriteBase配置 #

你的现有.htaccess缺少RewriteBase，这在子目录部署时很容易出问题。修改后的配置如下：

RewriteEngine On
# 根据部署路径设置RewriteBase，根目录写/，子目录写对应路径
RewriteBase /
# 匹配实际存在的文件、链接或目录，直接返回
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
# 所有其他请求重定向到index.html
RewriteRule ^(.*)$ index.html [NC,L]

如果应用在子目录（比如/angular-app/），就把RewriteBase改成/angular-app/，RewriteBase会自动处理路径，不用额外修改index.html的路径。

4. 排查控制台的错误信息 #

刷新页面后打开浏览器开发者工具（F12），切换到Console和Network标签：

• 看Console里有没有Angular抛出的错误，比如$route相关的模板加载失败、控制器未定义等，这些会直接导致页面无法渲染；
• 看Network里的静态资源（JS、CSS、模板文件）有没有404，如果有，说明资源路径配置错误，要调整为和<base>标签匹配的路径。

最后验证 #

按上面的步骤调整后，先清空浏览器缓存，再刷新页面，应该就能正常渲染了。如果还是有问题，优先看控制台的错误信息，那是最直接的排查线索。

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