使用grunt服务器,如何将所有请求重定向到根URL？

Question

我正在构建我的第一个Angular.js应用程序,我正在使用Yeoman.

Yeoman使用Grunt允许您使用命令'grunt server'运行node.js connect服务器.

我正在以html5模式运行我的角度应用程序.根据angular docs,这需要修改服务器以将所有请求重定向到应用程序的根目录(index.html),因为角度应用程序是单页面ajax应用程序.

"使用[html5]模式需要在服务器端重写URL,基本上你必须重写你的应用程序入口点的所有链接(例如index.html)"

我试图解决的问题在这个问题中有详细说明.

如何修改我的grunt服务器以将所有页面请求重定向到index.html页面？

Answer 1

首先,使用命令行,使用gruntfile导航到您的目录.

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

Answer 2

FYI Yeoman/Grunt最近更改了新Gruntfiles的默认模板.

复制默认的中间件逻辑对我有用:

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

Answer 3

我发送了一个针对此问题的拉取请求:https://github.com/yeoman/generator-angular/pull/132,但您需要手动应用它.

Answer 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"
          }
      }
  }  
  

尽可能简化这一点.因为您可以访问connect提供的中间件,所以很容易将重写设置为第一优先级响应.我知道问题有问题已经有一段时间了,但这是Google搜索问题的最佳结果之一.

Idea来自源代码:https://github.com/gruntjs/grunt-contrib-connect/blob/master/Gruntfile.js#L126-L139
规则字符串来自:http://danburzo.ro/grunt/chapters/server /