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

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

Could I please know what part of [this snippet] is causing it to fail and how do I fix this?

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

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

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

一个补救建议是更明确地避免重写对静态资产的请求：

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

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

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

希望对您有所帮助！ HMU 有任何问题，更正，或者 well actually-s.

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

Grunt URL rewrite in Angular application on page reload

javascript

legacy

gruntjs

angular