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

Question

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

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

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

"Using [html5] mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)"

我试图解决的问题在 this 中有详细说明问题。

如何修改我的 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)
                    ];
                }
            }
        }
    },