AngularJS html5Mode 使用 Grunt 连接.咕噜声 0.4.5 [英] AngularJS html5Mode using Grunt connect. grunt 0.4.5

问题描述

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

我之前使用过 connect-modrewrite 并且效果很好(/:parameter 生成的 url 有一些问题).

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

连接:{选项: {端口:9000，主机名: '*IP HERE*',实时加载:35729，中间件:功能(连接，选项){var optBase = (typeof options.base === 'string') ?[options.base] : options.base;return [require('connect-modrewrite')(['!(\\..+)$/[L]'])].concat(optBase.map(function(path){ return connect.static(path); }));}},实时加载:{选项: {打开:真实，根据: ['.tmp','<%= yeoman.app %>']}},

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

连接:{选项: {端口:9000，主机名: '*IP HERE*',实时加载:35729},实时加载:{选项: {打开:真实，中间件:功能(连接){返回 [connect.static('.tmp'),连接().使用('/bower_components',connect.static('./bower_components')),连接.静态(appConfig.app)];}}},

我如何更改它以使用 mod-rewrite 或任何其他方法来实现 html5mode?

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

中间件:函数(连接){返回 [connect.static(modRewrite(['^[^\\.]*$/index.html [L]'])),connect.static('.tmp'),连接().使用('/bower_components',connect.static('./bower_components')),连接.静态(appConfig.app)];}

这允许我查看普通视图，但 modRewrite 部分似乎没有做它需要通过 url 访问任何其他视图的操作.

解决方案

如果其他人遇到这个问题，这里是解决方案:

(唯一添加的一行是 modRewrite 行)

实时加载:{选项: {打开:真实，中间件:功能(连接){返回 [modRewrite(['^[^\\.]*$/index.html [L]']),connect.static('.tmp'),连接().使用('/bower_components',connect.static('./bower_components')),连接.静态(appConfig.app)];}}},

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

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

I recently switched over to grunt 0.4.5 and it changed how connect works.

I previously used connect-modrewrite and it worked pretty well (had some issues with urls generated by /:parameter).

Here is the old version that worked with grunt 0.4.1 from generator-angular 0.8.0 with the middleware part modded by me to use 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 %>'
            ]
        }
    },

Here is the new version from 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)
                ];
            }
        }
    },

How can I change this to use mod-rewrite or any other method to achieve html5mode?

I tried using the method provided here: https://gist.github.com/nnarhinen/7719157 I combined it to create the following:

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

This allows me to view the normal view, but the modRewrite part does not seem to do what it needs to in order to get to any other view via url.

解决方案

If anyone else stumbles across this here is the fix:

(the only line added was the modRewrite line)

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

Make sure you have the following declared at the top of your grunt file:

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

这篇关于AngularJS html5Mode 使用 Grunt 连接.咕噜声 0.4.5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！