AngularJS虚拟目录部署导航问题：无尾斜杠访问触发404错误

这个问题我之前帮朋友排查过类似的，本质是虚拟目录下的URL路径解析差异搞的鬼，咱们一步步来搞定它：

问题根源 #

当你访问www.abc.com/blog/admin（不带尾斜杠）时，服务器会把这个URL当成一个「文件」来处理，重定向后路径变成www.abc.com/blog/admin#/。这时候AngularJS加载模板（比如dashboardView.html）时，会以当前URL的路径/blog/admin为基准，去请求/blog/admin/app/dashboard/dashboardView.html——但你的静态资源实际是放在/blog/admin/这个目录下的，少了个尾斜杠，路径自然就错了，直接404。

而带尾斜杠访问时，服务器识别这是个目录，重定向后路径是www.abc.com/blog/admin/#/，资源请求基准是/blog/admin/，路径完全正确，所以能正常运行。

解决方案 #

推荐用「服务器端重定向 + AngularJS base配置」的组合，从根源解决问题：

1. 服务器端强制添加尾斜杠

给服务器加个规则，只要访问的是/blog/admin目录且不带尾斜杠，就自动重定向到带尾斜杠的版本：

• Nginx 配置示例：

  location /blog/admin {
      if (-d $request_filename) {
          rewrite ^(.*[^/])$ $1/ permanent;
      }
  }
  

• Apache 配置示例（需要开启mod_rewrite）：

  RewriteEngine On
  RewriteBase /blog/admin/
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^(.*[^/])$ $1/ [L,R=301]
  

  这个规则会永久重定向（301），既解决了访问路径的一致性，也对SEO友好。

2. 配置AngularJS的base href

在你的入口HTML文件（比如index.html）的<head>标签里加上一行：

<base href="/blog/admin/">

这样AngularJS就会固定以/blog/admin/为基准路径来解析所有相对资源和路由，不管用户访问的URL有没有尾斜杠，模板请求路径都会是正确的/blog/admin/app/dashboard/dashboardView.html。

3. 确认路由路径（可选）

确保你路由里的templateUrl都是相对base href的路径，像你现在写的"app/dashboard/dashboardView.html"就完全没问题，不用修改。

总结 #

先配服务器重定向，再加上base href，这两个步骤配合起来，就能彻底解决带不带尾斜杠访问的差异问题，不管用户怎么输URL，网站都能正常运行。

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