AngularJS html5Mode使用。咕噜声0.4.5

Question

我最近切换到咕噜0.4.5，它改变了连接的工作方式。

我以前使用的是，它运行得很好(/:parameter生成的urls有一些问题)。

这是一个旧的版本，它使用生成器中的grunt 0.4.1 -角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 %>'
            ]
        }
    },

这是最新版本的发电机角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重写或任何其他方法来实现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
        },
        //...
    },
    //...
}

Answer 3

尽管如此，接受的答案是正确的。我添加了我使用的配置，它在CentOs上工作得很好。

下面的1至3个步骤是使用$ grunt serve使Angularjs在本地机器中使用

但是，如果您想使它们在服务器上运行良好，特别是 nginx ，则还需要更新nginx。(第4步)

1. $ npm install connect-modrewrite --save
2. 编辑您的gruntfile.js。在文件顶部添加 var modRewrite =需要量(‘’)；

然后在你的middleware

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

例如：

// Generated on 2015-11-09 using generator-angular 0.14.0
'use strict';

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'
var modRewrite = require('connect-modrewrite');

module.exports = function (grunt) {

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

3.然后转到Livereload中间件，添加modRewrite

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

4.编辑NGINX配置：

server {
    server_name yoursite.com;
    root /usr/share/html;
    index index.html;

    location / {
    try_files $uri $uri/ /index.html;
    }
}

希望它有帮助:)