AngularJS ui-router、html5Mode 和 Express 的“无法获取”嵌套状态

Question

目前我正在尝试让$locationProvider.html5Mode(true) 与 AngularJS、ui-router 和 ExpressJS 一起工作。给定带有 URL /parent 的抽象状态 parent 和带有 URL /child 的嵌套状态 parent.child，导航到网页本身内的 localhost:3000/parent/child 就可以了。但是，当在同一个 URL 上刷新页面（或直接在地址栏中输入 URL）时，浏览器会返回一条消息“Cannot GET /parent/child”。

我们一直在尝试一些不同的配置，例如 ExpressJS 和中间件。这些设置不能解决我们的问题：

app.use(express.static(__dirname + "/public"));

app.get("/", function(req, res, next) {
    console.log(req.url);
    res.sendFile(__dirname + "/public/index.html");
});

返回“无法获取”错误。

app.use(express.static(__dirname + "/public"));

app.get("*", function(req, res, next) {
    console.log(req.url);
    res.sendFile(__dirname + "/public/index.html");
});

由于 Express 使用 <script> 标记为 index.html 中的 js 文件请求发送 index.html，因此每个 js 文件都会向 (Chrome) 开发者控制台发送错误 Uncaught SyntaxError: Unexpected token <。

导航到localhost:3000/parent 之类的网址时，网页显示正常，没有任何错误。

更新：我应该提一下，.js 文件的请求 URL 变成了 /parent/js/someJsFile.js，例如，在刷新 localhost:3000/parent/child 时。

Answer 1

通常的做法是将您的静态资源保存在可以隔离并由静态中间件提供服务的位置（正因如此）。

推荐 将您的静态资产（即 js 文件）移动到为静态资源指定的位置。

然后，上面的第二个配置是修复：

app.use(express.static(__dirname + "/public/static")); //<-- JavaScript here

app.get("*", function(req, res, next) {
    console.log(req.url);
    res.sendFile(__dirname + "/public/index.html");
});

或者 您可以使用 urlrewrite 中间件来实现您的目标：https://github.com/kapouer/express-urlrewrite