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

Posted 2023-02-22

【中文标题】使用 grunt 服务器，如何将所有请求重定向到根 url？

【英文标题】：Using grunt server, how can I redirect all requests to root url?

【发布时间】：2013-06-09 10:48:47

【问题描述】：

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

Yeoman 使用 Grunt 允许您使用命令“grunt server”运行 node.js 连接服务器。

我在 html5 模式下运行我的 Angular 应用程序。根据 Angular 文档，这需要修改服务器以将所有请求重定向到应用程序的根目录 (index.html)，因为 Angular 应用程序是单页 ajax 应用程序。

“使用 [html5] 模式需要在服务器端重写 URL，基本上你必须重写所有指向应用程序入口点的链接（例如 index.html）”

this 问题中详细说明了我要解决的问题。

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

【参考方案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)
                    ];
                
            
        
    ,

【讨论】：

上面关于拉取请求的答案很好，但我喜欢@zuriel 在这里展示了如何手动完成。

question 接受的答案对我有用。

谢谢！！！这拯救了我的一天。我不知道为什么 yeoman 角度生成器对此没有帮助......

【参考方案2】：

仅供参考，Yeoman/Grunt 最近更改了新 Gruntfile 的默认模板。

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;

---

更新：从 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;
          
        
      
    
  );

【讨论】：

Zuriel 的答案非常好，但这应该是公认的答案。别忘了npm install --save-dev connect-modrewrite

【参考方案3】：

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

【讨论】：

还是这样吗？

【参考方案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 提供的中间件，所以很容易将重写设置为第一优先级响应。我知道这个问题被问到已经有一段时间了，但这是谷歌搜索该问题的最佳结果之一。

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

【参考方案5】：

我尝试了所有这些，但没有运气。我正在编写一个 angular2 应用程序，解决方案来自 grunt-connect pushstate。 我所做的只是：

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