AngularJS:当html5mode(true)打开时,相对链接路径会断开

AngularJS:当html5mode(true)打开时,相对链接路径会断开,angularjs,relative-path,angular-ui-router,pushstate,location-provider,Angularjs,Relative Path,Angular Ui Router,Pushstate,Location Provider,我一直在寻找,我找到了这个问题的“解决方案”,但我仍然无法让它正常工作 情景: 我正在用UI路由器构建一个Angular(1.2版)网站,并在localhost上的节点服务器上运行它。我正试图通过$locationProvider和打开html5(true)使其具有“漂亮”的url。我的网站在点击时运行良好,但当我尝试导航到相对链接路径或刷新链接路径时,页面会中断。我还打算在完成后将此Web应用部署到Heroku: 相对链接路径: http://localhost:8000/locksmith-

我一直在寻找,我找到了这个问题的“解决方案”,但我仍然无法让它正常工作

情景: 我正在用UI路由器构建一个Angular(1.2版)网站,并在localhost上的节点服务器上运行它。我正试图通过$locationProvider和打开html5(true)使其具有“漂亮”的url。我的网站在点击时运行良好,但当我尝试导航到相对链接路径或刷新链接路径时,页面会中断。我还打算在完成后将此Web应用部署到Heroku:

相对链接路径:

http://localhost:8000/locksmith-services
页面输出结果

Cannot GET /locksmith-services

我已采取的步骤: 1。)在我的“index.html”中,我已将我的基本url设置为:

<base href="/"></base>
3。)在我的导航中,我的html写为:

<div class="wrapper">
    <a ui-sref="home">
        <img src="images/logo.png" class="logo" alt="Austin Texas Locksmith" />
    </a>
</div>
<nav class="row navigation">
    <a class="mobile33" ui-sref="services" ui-sref-active="active" class="active">Services</a>
    <a class="mobile33" ui-sref="locations" ui-sref-active="active">Locations</a>
    <a class="mobile33" ui-sref="payment" ui-sref-active="active">Payment</a>
</nav>

最好的解决方案是什么?提前感谢您的帮助。

当HTML5mode设置为true时,您需要在服务器上设置自动将用户重定向到索引页的内容,以便AngularJS UI路由器可以从那里接管

原因是,如果URL中没有散列(#),它会将其作为文本URL,并在您直接刷新或粘贴URL时尝试导航到该URL


我对Node不是很熟悉,所以不知道你会怎么做,但UI路由器GitHub上有一个FAQ页面可以帮助你入门:

感谢@trehyu帮助我找到这个答案

正如他所写,我需要在server.js文件上设置一些东西,将用户重定向到我的“index.html”文件

因此,根据您的文件结构

之前(不工作)

之后(工作)


我希望这对其他人有帮助

谢谢你的帮助!重新编写我的server.js文件成功了。
<div class="wrapper">
    <a ui-sref="home">
        <img src="images/logo.png" class="logo" alt="Austin Texas Locksmith" />
    </a>
</div>
<nav class="row navigation">
    <a class="mobile33" ui-sref="services" ui-sref-active="active" class="active">Services</a>
    <a class="mobile33" ui-sref="locations" ui-sref-active="active">Locations</a>
    <a class="mobile33" ui-sref="payment" ui-sref-active="active">Payment</a>
</nav>
var express = require('express');
var app = express();

app.use(express.static(__dirname + '/front'));
var port = process.env.PORT || 8000;
app.listen(port);
var express = require('express');
var app = express();

app.use(express.static(__dirname + '/front'));
var port = process.env.PORT || 8000;
app.listen(port);
var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/front/js'));
app.use('/build', express.static(__dirname + '/../build'));
app.use('/css', express.static(__dirname + '/front/css'));
app.use('/images', express.static(__dirname + '/front/images'));
app.use('/pages', express.static(__dirname + '/front/pages'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('/front/index.html', { root: __dirname });
});

var port = process.env.PORT || 8000;
app.listen(port);