angularjs - Cannot GET / page

Question

I am trying to use grunt contrib connect for local development and testing of an angular app.

the gruntfile is configured like so:

connect: {
    server: {
        options: {
            open: true,
            keepalive: true, 
            hostname: 'localhost',
            port: 8080
        }
    }
}

and the task

grunt.registerTask('serve', [
    'connect:server'
]);

grunt serve opens the browser with the file listing of the root directory. Clicking on the dist directory launches the app. Everything is fine until here: it's possible to change page from the app menu, but… direct access or reload of any of these pages, gives Cannot GET /dist/page… It's necessary to go back to `localhost:8080/dist' to make it work again…

What could I do to make this work?

Answer 1

我在这里找到了一个解决方案，使用 grunt connect-modrewrite

现在的任务是：

server: {
    options: {
        port: 9000,
        livereload: 35729,
        hostname: 'localhost',
        open: true,
        middleware: function (connect) {
            return [
                        modRewrite(['^[^\\.]*$ /index.html [L]']),
                        connect.static('dist')
                    ];
                }
            }
        }

Answer 2

我建议您添加base选项以将“dist”目录指定为 Connect 服务器的根目录：

connect: {
    server: {
        options: {
            open: true,
            keepalive: true, 
            hostname: 'localhost',
            port: 8080,
            base: 'dist'
        }
    }
}

如果这不能解决您的问题，它至少会使路线不那么混乱。