grunt-connect-proxy - 重新加载时 grunt 连接代理 + grunt-livereload 404

Question

我的 Gruntfile 配置有问题，但我不知道如何解决。当我的路径有单个路由时，例如：localhost:9000/contractor 重新加载工作正常，但是当重新加载 localhost:9000/add/something 时，我收到错误 404，因为浏览器在“添加”目录中搜索文件不在主目录示例中：GET localhost:9000 /add/bower_components/bootstrap/dist/css/bootstrap.css 目录“添加”不存在。我正在使用 Angular 1.6.0 和 angular-route 1.6.0

Gruntfile.js

'use strict';

var modRewrite = require('connect-modrewrite');
var config = {app: 'app'};
var mountFolder;

module.exports = function (grunt)
{
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    require('load-grunt-tasks')(grunt);

    mountFolder = function (connect, dir)
    {
        return connect['static'](require('path').resolve(dir));
    };

    grunt.initConfig({
                config: config,
                watch: {
                    livereload: {
                        options: {
                            livereload: '<%= connect.options.livereload %>'
                        },
                        files: ['<%= config.app %>/index.html',
                            '<%= config.app %>/*.js',
                            '<%= config.app %>/modules/**/*']
                    }
                },
                connect: {
                    options: {
                        port: 9000,
                        livereload: 35729,
                        hostname: 'localhost'
                    },
                    livereload: {
                        options: {
                            open: true,
                            middleware: function (connect)
                            {
                                return [
                                    // in case of using html5Mode - makes accessible uris without hashbang but containing view's path
                                    modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png|\\.jpg|\\.ttf|\\.woff|(\\api.+)$ /index.html [L]']),
                                    mountFolder(connect, config.app),
                                    connect().use('/bower_components', connect.static('./bower_components')),
                                    require('grunt-connect-proxy/lib/utils').proxyRequest];
                            }
                        }
                    },
                    proxies: [{
                        context: '/api',
                        host: 'localhost',
                        port: 3000,
                        changeOrigin: true
                    }],
                    jshint: {
                        default: {
                            options: {
                                jshintrc: true
                            },
                            files: {
                                src: ['app/**/*.js', 'test/**/*.js', '!app/bower_components/**/*.js']
                            }
                        },
                        verify: {
                            options: {
                                jshintrc: true,
                                reporter: 'checkstyle',
                                reporterOutput: 'target/jshint.xml'
                            },
                            files: {src: ['app/**/*.js', 'test/**/*.js', '!app/bower_components/**/*.js']}
                        }
                    }
                }

            }
    );

    grunt.registerTask('serve', ['configureProxies', 'connect:livereload', 'watch']);

    grunt.registerTask('default', ['serve']);
};

我的依赖：

 "devDependencies": {
    "connect-livereload": "0.5.2",
    "connect-modrewrite": "0.9.0",
    "grunt": "0.4.5",
    "grunt-cli": "0.1.13",
    "grunt-contrib-connect": "0.7.1",
    "grunt-contrib-jshint": "0.11.3",
    "grunt-contrib-watch": "0.6.1",
    "grunt-connect-proxy": "0.2",
    "load-grunt-tasks": "3.0.0"
  }

Answer 1

问题出在 angular-route 1.6.0 上。我加了

<base href="/" />

在链接 css 样式和工作之前到 index.html。