Как использовать сервер grunt, как я могу перенаправить все запросы на корневой URL?

Я создаю свое первое Angular.js приложение, и я использую Yeoman.

Yeoman использует Grunt, чтобы вы могли запускать сервер подключения node.js с помощью команды "grunt server".

Я запускаю приложение angular в режиме html5. Согласно документам angular, для этого требуется модификация сервера для перенаправления всех запросов в корень приложения (index.html), поскольку angular приложения - это одноадресные приложения ajax.

"Использование режима [html5] требует перезаписи URL-адресов на стороне сервера, в основном вы должны переписать все свои ссылки на точку входа вашего приложения (например, index.html)"

Проблема, которую я пытаюсь решить, подробно описана в этом вопросе.

Как я могу изменить свой сервер grunt для перенаправления всех запросов на страницу index.html?

Ответы

Ответ 1

Сначала, используя вашу командную строку, перейдите в свой каталог с вашим файлом grunt.

Введите это в CLI:

npm install --save-dev connect-modrewrite

В верхней части вашего файла grunt введите следующее:

var modRewrite = require('connect-modrewrite');

Теперь в следующей части вы хотите добавить modRewrite в ваше соединение:

modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']),

Вот пример того, как выглядит мое "соединение" внутри моего Gruntfile.js. Вам не нужно беспокоиться о моем lrSnippet и моих ssIncludes. Главное, что вам нужно, это просто ввести modRewrite.

        connect: {
        options: {
            port: 9000,
            // Change this to '0.0.0.0' to access the server from outside.
            hostname: '0.0.0.0',
        },
        livereload: {
            options: {
                middleware: function (connect) {
                return [
                        modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']),
                        lrSnippet,
                        ssInclude(yeomanConfig.app),
                        mountFolder(connect, '.tmp'),
                        mountFolder(connect, yeomanConfig.app)
                        ];
                }
            }
        },
        test: {
            options: {
                middleware: function (connect) {
                    return [
                    mountFolder(connect, '.tmp'),
                    mountFolder(connect, 'test')
                    ];
                }
            }
        },
        dist: {
            options: {
                middleware: function (connect) {
                    return [
                    mountFolder(connect, yeomanConfig.dist)
                    ];
                }
            }
        }
    },

Ответ 2

Недавно FYI Yeoman/Grunt изменил шаблон по умолчанию для новых Gruntfiles.

Копирование логики по умолчанию по умолчанию > работало для меня:

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

  // enable Angular 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 HTML5 mode
            middlewares.unshift(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));

            return middlewares;
          }
        }
      }
    }
  });
}

Ответ 4

Чтобы глубоко упростить @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 в отношении проблемы.

Идея исходила из исходного кода: https://github.com/gruntjs/grunt-contrib-connect/blob/master/Gruntfile.js#L126-L139
Строка правил из: http://danburzo.ro/grunt/chapters/server/

Ответ 5

Я пробовал все это, но не повезло. Я пишу приложение angular2, и решение появилось из pushstate grunt-connect. Все, что я сделал, это:

npm install grunt-connect-pushstate --save

и в файле grunt:

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