启用html5Mode时ui-router无法路由到$urlRouterProvider.otherwise路径

我之前也碰到过一模一样的问题，折腾了好一会儿才搞明白根源——开启HTML5模式后，不光前端要调整，服务器端的配置才是关键！

先说说为啥会出问题 #

当你打开$locationProvider.html5Mode(true)后，Angular就会用HTML5的History API来管理路由，不再依赖#号。这时候如果服务器没配置好，用户直接访问某个路由（比如/dashboard）或者刷新页面时，服务器会以为这是一个真实的文件路径，找不到就返回404，连带着$urlRouterProvider.otherwise的跳转逻辑也没法正常触发。

一步步解决： #

1. 前端必须补的配置

先去你的index.html的<head>标签里加上<base href="/">，这是HTML5模式的硬性要求，用来告诉Angular应用的基础路径，避免路由解析出错。

然后调整你的otherwise配置，把相对路径改成绝对路径：

$urlRouterProvider.otherwise("/dashboard");

之前的"dashboard"是相对路径，在HTML5模式下容易出问题，换成"/dashboard"更稳妥。

2. 服务器端配置（最关键的一步）

所有路由请求都得指向你的index.html，让Angular来处理路由逻辑，不同服务器的配置方式不一样，给你几个常用的例子：

• Nginx：在配置文件里加这段

location / {
    try_files $uri $uri/ /index.html;
}

• Apache：在项目根目录创建.htaccess文件，写入以下规则

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

• Express（Node.js）：添加一个全局中间件

const path = require('path');
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '你的项目路径/index.html'));
});

这么配置后，不管用户访问哪个路由，服务器都会返回index.html，交给Angular的ui-router去处理，这时候otherwise的跳转逻辑就能正常工作了。

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