46

私は最初のAngular.jsアプリケーションを構築しており、 Yeomanを使用しています。

Yeoman は Grunt を使用して、「grunt server」コマンドで node.js 接続サーバーを実行できるようにします。

angular アプリケーションを html5 モードで実行しています。angular docsによると、angularアプリは単一ページのajaxアプリケーションであるため、すべてのリクエストをアプリケーションのルート（index.html）にリダイレクトするようにサーバーを変更する必要があります。

「[html5] モードを使用するには、サーバー側で URL の書き換えが必要です。基本的には、アプリケーションのエントリ ポイント (index.html など) へのすべてのリンクを書き換える必要があります。」

私が解決しようとしている問題は、この質問で詳しく説明されています。

すべてのページ要求を index.html ページにリダイレクトするように grunt サーバーを変更するにはどうすればよいですか?

4

5 に答える 5

26

参考までに、Yeoman/Grunt は最近、新しい Gruntfile のデフォルト テンプレートを変更しました。

デフォルトのミドルウェアロジックをコピーするとうまくいきました：

middleware: function (connect, options) {
  var middlewares = [];
  var directory = options.directory || options.base[options.base.length - 1];

  // enable Angular's HTML5 mode
  middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));

  if (!Array.isArray(options.base)) {
    options.base = [options.base];
  }
  options.base.forEach(function(base) {
    // Serve static files.
    middlewares.push(connect.static(base));
  });

  // Make directory browse-able.
  middlewares.push(connect.directory(directory));

  return middlewares;
}

更新: grunt-contrib-connect 0.9.0 の時点で、ミドルウェアを接続サーバーに挿入するのがはるかに簡単になりました。

module.exports = function (grunt) {
  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);
  grunt.initConfig({
    // The actual grunt server settings
    connect: {
      livereload: {
        options: {
         /* Support `$locationProvider.html5Mode(true);`
          * Requires grunt 0.9.0 or higher
          * Otherwise you will see this error:
          *   Running "connect:livereload" (connect) task
          *   Warning: Cannot call method 'push' of undefined Use --force to continue.
          */
          middleware: function(connect, options, middlewares) {
            var modRewrite = require('connect-modrewrite');

            // enable Angular's HTML5 mode
            middlewares.unshift(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));

            return middlewares;
          }
        }
      }
    }
  });
}
于 2014-02-02T19:10:32.700 に答える
5

@Zurielの答えを非常に単純化するために、これが私に代わって機能することがわかったものです。

  • connect-modrewrite をインストールします。npm install connect-modrewrite --save
  • それを grunt ファイルに含めます。var rewrite = require( "connect-modrewrite" );

  • 書き換えを使用するように接続オプションを変更します。

    connect: {  
    options: {  
        middleware: function ( connect, options, middlewares ) {
            var rules = [
                "!\\.html|\\.js|\\.css|\\.svg|\\.jp(e?)g|\\.png|\\.gif$ /index.html"
            ];
            middlewares.unshift( rewrite( rules ) );
            return middlewares;
        }
    },
    server: {
        options: {
            port: 9000,
            base: "path/to/base"
        }
    }
}

これを可能な限り単純化しました。コネクトが提供するミドルウェアにアクセスできるので、リライトを最優先のレスポンスに設定するのは簡単です。質問が出されてからしばらく経っていることは承知していますが、これはこの問題に関する Google 検索の上位の結果の 1 つです。

アイデアはソースコードから生まれました: https://github.com/gruntjs/grunt-contrib-connect/blob/master/Gruntfile.js#L126-L139
ルール文字列: http://danburzo.ro/grunt/chapters/server /

于 2014-10-10T21:50:41.913 に答える
0

これらすべてを試しましたが、うまくいきませんでした。angular2 アプリを作成していますが、解決策は grunt-connect pushstate から得られました。私がしたことはすべて：

npm install grunt-connect-pushstate --save

そしてうなり声ファイルで：

var pushState = require('grunt-connect-pushstate/lib/utils').pushState;
middleware: function (connect, options) {
  return [
    // Rewrite requests to root so they may be handled by router 
    pushState(),

    // Serve static files 
    connect.static(options.base)
  ];
}

そしてそれはすべて魔法のように機能しました。

https://www.npmjs.com/package/grunt-connect-pushstate

于 2016-01-05T19:46:16.747 に答える