stateProvider 使用 htm5Mode 无法获取错误答案

【问题标题】：stateProvider using htm5Mode cannot GET errorstateProvider 使用 htm5Mode 无法获取错误
【发布时间】：2016-03-12 05:52:30
【问题描述】：

我正在使用带有 $locationProvider.html5Mode 的 stateProvider：

    // Redirect any unmatched url
    $urlRouterProvider.otherwise("/cool");  

    $stateProvider
        // Dashboard
        .state('cool', {
            url: "/cool",
            templateUrl: "views/cool.html"
        });

     $locationProvider.html5Mode(true);

但是当我http://localhost:8080/cool 我会得到Cannot GET /cool 错误。 http://localhost:8080/ 和 http://localhost:8080/#/cool 工作正常。

经过一番研究，我发现问题是由于 grunt connect。所以我添加了 modRoute 以将所有 url 路由到 index.html：

livereload: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
              modRewrite([
                '!\\.\\w+$ /'
              ]),

但现在的问题是每个 url，比如 http://localhost:8080/uncool 到 http://localhost:8080/cool。

【问题讨论】：

这很正常... angular 与 url 的散列部分一起使用，我认为要能够使用 html5 模式，您还应该更改服务器上的一些设置
你在头部添加了html base标签吗？
是的，我有标签

标签： angularjs connect-modrewrite

【解决方案1】：

首先，确保您的头脑中有“基础”标签。

<base href="/">

然后确保您的“/cool”页面提供与您的“/”相同的内容。如果没有，服务器将返回 404（如预期的那样）。这对于您的所有“子页面”都必须是正确的。

为了测试是否是这种情况——创建一个带有指向“/cool”的href的链接，angular应该使用pushState在“内部”处理这个问题，这与仅仅“浏览”到那个页面不同。意思是，当您单击链接时，页面将按预期运行，但如果您重新加载 (CTRL + R)，则会出现错误。

【讨论】：

【解决方案2】：

如果您使用html5mode，则必须在文档的head 部分中包含<base> 标签。您可以将requireBase 设置为false 并使用不带<base> 标记的html5mode。请看angular documentation和ui-router documentation

【讨论】：