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

Question

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

Yeoman использует Grunt для запуска сервера node.js connect с командой «grunt server».

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

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

Проблема, что я Мы пытаемся решить, подробно в this вопрос.

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

Answer 1

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

Тип этого в CLI:

npm install --save-dev connect-modrewrite 

В верхней части файла хрюкать поставить это:

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

Answer 2

Существует запрос на растяжение, который я отправил по этой проблеме: https://github.com/yeoman/generator-angular/pull/132, но вам необходимо применить его вручную.

Answer 3

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

Copying the default middlewares logic работал для меня:

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; 
} 

---

UPDATE: По хрюкать-вно-подключения 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; 
      } 
     } 
     } 
    } 
    }); 
} 

Answer 4

Чтобы глубоко упростить ответ @ Zuriel, вот что я нашел для работы от моего имени.

• Установите Connect-modrewrite: npm install connect-modrewrite --save
• включить его в свой файл хрюкать: 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/

Answer 5

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

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