Angular HTML5Mode - 重写规则

Question

当我刷新网站选项卡时，我遇到了路径问题：

我从Github上复制了这个重写规则：

  <rule name="Main Rule" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>

这个方法对于如https://www.mywebsite.com/dashboard这样的路径非常有效。

但是，当我刷新一个类似https://www.mywebsite.com/tab/settings的路径时，我的javascript可以正常加载，但我的css目录会向后偏移1。

我的脚本路径加载正确如下所示:

https://www.mywebsite.com/Scripts/angular.js

然而，我的CSS尝试加载为：

https://www.mywebsite.com/tab/Content/bootstrap.min.css

由于/tab/引起了我的问题。

我的路由：

.state('Template',
        {
            url: '',
            abstract: true,
            views: {
                'header': {
                    templateUrl: 'App/SharedViews/Landing/dashboardheader.html'
                }
            }
        })
        .state('Template.AdminTab',
        {
            url: '/admin',
            views: {
                'container@': {
                    templateUrl: 'App/Views/Admin.html'
                }
            }
        })
        .state('Template.Tab.Company',
        {
            url: '/company',
            views: {
                'container@': {
                    templateUrl: 'App/Views/Admin.html'
                },
                'tabs-views@': {
                    templateUrl: 'App/Views/Company.html'
                }
            }
        })
        .state('Template.Tab.Users',
        {
            url: '/users',
            views: {
                'container@': {
                    templateUrl: 'App/Views/Admin.html'
                },
                'tabs-views@': {
                    templateUrl: 'App/Views/Users.html'
                }
            }
        })

如何修改重写规则以正确加载2个或更多段的URL上的CSS？

- RandomUs1r

---

请查看此链接：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode - Kyle Krzeski

@Kyle 那就是我得到我正在尝试的URL重写规则的地方，我相信我已经实现了指南的底部部分，我除了我的URL重写规则之外还发布了我的路由。 - RandomUs1r

你能否发布一下你加载css的方法？你可能使用了Content/bootstrap.min.css而不是/Content/bootstrap.min.css。请注意，前者将使用相对路径而非绝对路径。 - maurycy

你是如何在 index.html 中加载 CSS 的？ - Sravan

@maurycy 看起来只需要添加一个 / 就可以了，但我有点困惑，因为我期望得到不同的行为：现在我将我的 CSS 调用作为 <link rel="stylesheet" href="/Content/flexslider.css"> ，我可以正确地刷新我的选项卡浏览页面，但是我仍然将我的 JavaScript 调用为 <script src="Scripts/angular.js"></script> 。我想知道这之间的区别是什么，麻烦您将您的建议发布为答案，谢谢！ - RandomUs1r

在源链接前添加 / 表示它将从域根级别开始解析路径。 - maurycy

Answer 1

路径应该为：/Content/bootstrap.min.css

而不是：Content/bootstrap.min.css

在路径前加上'/'将基于根目录解决路径问题。

- Kyle Krzeski

Answer 2

我看到了@maurycy的建议，某种程度上我同意。但是这个解决方案也有它自己的限制。如果你想在一个新的上下文中部署你的应用程序，比如https://www.mywebsite.com/my_new_app。

现在/Content/bootstrap.min.css仍然指向https://www.mywebsite.com/bootstrap.min.css，这将再次导致问题。

在我看来，如果你想控制它，你可以使用base标签。它定义了你的网站的基本URL，你的浏览器将加载所有相对URL（不以/开头的URL）并将其作为前缀添加到它们中。在你的HTML的head标签中设置如下：

<base href="/">

现在，所有资产都将相对于此路径加载，而不管您当前的浏览器URL是什么。另外，您可以在这里指定任何上下文。例如，如果您已将应用程序部署在/my_new_app下，只需更改href为/my_new_app/（不要忘记斜杠），URL将开始相对于此路径加载。

希望这有所帮助。

- 31piy

---

/my_new_app/ just worked when don't have port for example for localhost apache server as xamp or wamp, this question related to IIS which has web.config so it should be href="/" - Maher

@Maher - 感谢您的评论，但是这个解决方案没有考虑任何服务器端处理。base只是一个客户端标签，它建议浏览器相对于指定路径解析URL。 - 31piy

有趣的是，我一直有<base href="/"/>，所以我需要在那里已经有基础的 /。 - RandomUs1r

@RandomUs1r -- 不确定！那么你的意思是你已经定义了基础标签，但它还是没有帮助？ - 31piy

@RandomUs1r -- 这解决了你的问题吗？ - 31piy