一尘不染

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

angularjs

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

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

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

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

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


阅读 178

收藏
2020-07-04

共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)
                    ];
                }
            }
        }
    },
2020-07-04