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.

My Scripts路径加载正确如下：

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 +段深度的网址上正确加载css？

Answer 1

应该将您的路径视为： /Content/bootstrap.min.css

代替： Content/bootstrap.min.css

提出＆＃39; /＆＃39;在前面将根据根目录解析路径。

Answer 2

我看到@maurycy的建议，直到某一点，我同意。但这种解决方案有其自身的局限性。如果您想在新的上下文中部署应用，例如https://www.mywebsite.com/my_new_app。

，该怎么办？

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

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

<base href="/">

现在，无论您当前的浏览器网址是什么，您的所有资产都将相对于此路径加载。另外，您可以在此自由指定任何上下文。例如，如果您已在/my_new_app下部署了应用，只需将href更改为/my_new_app/（不要忘记尾随斜杠），这些网址就会启动相对于此路径加载。

希望这有帮助。

Angular HTML5Mode - 重写规则

2 个答案: