在页面重载时在Angular应用程序中重写URL

Question

下面是Grunt文件中livereload块的样子：

livereload: {
  options: {
    open: true,
    middleware: function(connect, options, middleware) {
      var optBase = typeof options.base === "string" 
        ? [options.base] 
        : options.base;

      return [
        [
          require("connect-modrewrite")(["!(\\..+)$ / [L]"])
        ].concat(
          optBase.map(function(path) { return connect.static(path); })
        ),
        connect.static(".tmp"),
        connect().use("/bower_components", connect.static("./bower_components")),
        connect().use("/app/styles", connect.static("./app/styles")),
        connect.static(appConfig.app)
      ];
    }
  }
}

但是，如果我的URL有一个'.‘(句号)在其中，Grunt无法重新加载页面。我在我的Angular应用程序中使用HTML5模式，它工作得很好。

我能知道那一部分吗？

[
  require("connect-modrewrite")(["!(\\..+)$ / [L]"])
].concat(
  optBase.map(function (path) { return connect.static(path); })
)

是导致它失败的原因，我如何解决这个问题？

注意:它只在页面重载时失败。当我第一次访问它工作的路线时，如果我点击刷新，它就会失败。

Answer 1

我能知道这段代码的哪一部分导致它失败了吗?我该如何修复它？

此处的connect-modrewrite规则似乎仅用于重写非静态资产URL。

[
  require("connect-modrewrite")(["!(\\..+)$ / [L]"])
].concat(
  optBase.map(function (path) { return connect.static(path); })
)

这里传入的规则"!(\\..+)$ / [L]"是一个inverted URL matching rule，用于将所有不包含句点和一个或多个字符的URL重写回基URL (/)。因此，如果您的路由包含句点，它们将不会被重写...这就是它在实时重载运行时失败的原因。

解决这个问题的一个建议是更明确地避免对静态资产的请求进行重写：

    require("connect-modrewrite")([
      '!\\.html|\\.js|\\.svg|\\.css|'
      + '\\.scss.*|\\.woff.*|\\.gif.*|\\.png$ '
      // etc...
      + '/ [L]'
    ])

请注意，此规则也以感叹号(!)开头。它不是仅仅依赖句点的存在，而是更明确地针对不包括某些文件扩展名的URLs -以及句点！(：

注：code for the suggestion was found on searchcode.com here

我希望这能帮到你!HMU包含任何问题、更正，或者实际上是-s。