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

Question

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

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

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

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

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

Answer 1

首先，使用命令行使用gruntfile导航到目录。

在CLI中输入以下内容：

npm install --save-dev connect-modrewrite

在您的咕unt声文件的顶部放这个：

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