使用Grunt connect的AngularJS html5Mode.咕噜0.4.5

Question

我最近切换到grunt 0.4.5,它改变了连接的工作方式.

我之前使用过connect-modrewrite,它运行得很好(有一些问题与/:参数生成的url).

这是旧的版本,使用grunt 0.4.1 from generator-angular 0.8.0,中间件部分由我修改为使用html5mode.

connect: {
    options: {
        port: 9000,
        hostname: '*IP HERE*',
        livereload: 35729,
        middleware: function (connect, options) {
            var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
            return [require('connect-modrewrite')(['!(\\..+)$ / [L]'])].concat(
                optBase.map(function(path){ return connect.static(path); })
            );
        }
    },
    livereload: {
        options: {
            open: true,
            base: [
                '.tmp',
                '<%= yeoman.app %>'
            ]
        }
    },

这是generator-angular 0.9.0-1的新版本

connect: {
    options: {
        port: 9000,
        hostname: '*IP HERE*',
        livereload: 35729
    },
    livereload: {
        options: {
            open: true,
            middleware: function (connect) {
                return [
                    connect.static('.tmp'),
                    connect().use(
                        '/bower_components',
                        connect.static('./bower_components')
                    ),
                    connect.static(appConfig.app)
                ];
            }
        }
    },

如何更改此设置以使用mod-rewrite或任何其他方法来实现html5mode？

我尝试使用此处提供的方法:https://gist.github.com/nnarhinen/7719157 我将它组合起来创建以下内容:

middleware: function (connect) {
    return [
        connect.static(modRewrite(['^[^\\.]*$ /index.html [L]'])),
        connect.static('.tmp'),
        connect().use(
            '/bower_components',
            connect.static('./bower_components')
        ),
        connect.static(appConfig.app)
    ];
}

这允许我查看普通视图,但modRewrite部分似乎没有做它需要的东西,以便通过url到达任何其他视图.

Answer 1

如果其他人偶然发现这是修复:

(唯一添加的行是modRewrite行)

livereload: {
    options: {
        open: true,
        middleware: function (connect) {
            return [
                modRewrite(['^[^\\.]*$ /index.html [L]']),
                connect.static('.tmp'),
                connect().use(
                    '/bower_components',
                    connect.static('./bower_components')
                ),
                connect.static(appConfig.app)
            ];
        }
    }
},

确保在grunt文件的顶部声明了以下内容:

var modRewrite = require('connect-modrewrite');

Answer 2

鉴于其他答案非常冗长并且不保留默认grunt-contrib-connect中间件,我想出了使用专用中间件的connect-history-api-fallback解决方案-:

npm install connect-history-api-fallback --save-dev

var history = require('connect-history-api-fallback')
//...
connect: {
    options: {
        middleware: function(connect, options, middleware) {
            middleware.unshift(history())
            return middleware
        },
        //...
    },
    //...
}