带有 grunt 服务的 html5 模式不起作用答案

【问题标题】：html5 mode with grunt serve not working带有 grunt 服务的 html5 模式不起作用
【发布时间】：2017-09-24 07:24:57
【问题描述】：

在 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)
      ];
    }
  }
},

添加：

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

确实曾经为我工作以启用 html5 模式，否则，我的路由在没有 #! 的情况下无法加载！当我尝试通过浏览器重新加载时。

我确实在配置中添加了 base href='/' 和 html5Mode(true)。还有什么我可以尝试的吗？为什么它真的会停止工作？

注意：原来我的 URL 中有一个点，而 connect-mod 重写规则并没有很好地处理它。知道如何更改它并使其能够处理 URL 中的点吗？

【问题讨论】：

您的应用配置是否配置为使用 html5 模式？
是的........

标签： angularjs gruntjs

【解决方案1】：

尝试在配置块的根应用模块中添加它。确保包含/注入 $locationProvider。

$locationProvider
  .html5Mode({
    enabled: true,
    requireBase: false
  })
  .hashPrefix('!');

【讨论】：

原来我的 URL 中有一个点，而 connect-mod 重写规则并没有很好地处理它。知道如何更改它并使其能够处理 URL 中的点吗？
@SimranKaur 你用什么做 BE？你也配置了吗？
@SimranKaur 后端。

【解决方案2】：

我相信点问题是一般问题的副作用。具有相同的设置，或多或少。我只是像这样重置.config()中的html5Mode：

if (window.location.host == 'localhost:9000') {
   $locationProvider.html5Mode(false);
   $locationProvider.hashPrefix('');
} else {
   $locationProvider.html5Mode(true);
}

在开发模式下，应用程序仍然会在所有 url 前加上 #/，这使得 url、链接和 livereload 变得很痛苦。通过将常规 /urls 更改为 /#/urls 的小指令解决了这个问题：

var isLocalHost = (location.hostname === "localhost" || location.hostname === "127.0.0.1");
angular.module('myApp').directive('debugLink', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $timeout(function() {         
        var href = element.attr('href');
        if (href && isLocalHost && href.charAt(0) == '/') {
          element.attr('href', '#'+href);
        }
      }, 100);
    }
  }
});

现在可以通过<a href="/url" debug-link>link</a>进行链接

最后我在生产服务器上使用来自https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode 的.htaccess 重定向

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

我在几个 angularjs+grunt 项目中使用了这种方法。它可以防止 livereload 中断，即当我点击 Ctrl-S 页面被刷新，我可以在任何地方使用正确的 url。我想没有人对在生产模式下使用前缀或哈希感兴趣。

【讨论】：