AngularJS：打开 html5mode(true) 时，相对链接路径被破坏

Posted 2023-04-14

【中文标题】AngularJS：打开 html5mode(true) 时，相对链接路径被破坏

【英文标题】：AngularJS: Relative link paths are broken when html5mode(true) is on

【发布时间】：2014-11-21 21:15:32

【问题描述】：

我一直在搜索，并找到了解决此问题的“解决方案”，但我仍然无法使其正常工作。

情景：

我正在使用 UI 路由器构建一个 Angular（1.2 版）网站，并在本地主机上的节点服务器上运行它。我试图通过 $locationProvider 并打开 html5(true) 使其具有“漂亮”的 url。我的网站在单击时工作正常，但是当我尝试导航到相对链接路径或刷新链接路径时，页面会中断。我还打算在完成后将此 web 应用程序部署到 Heroku：

相对链接路径：

http://localhost:8000/locksmith-services

页面输出结果

Cannot GET /locksmith-services

我采取的步骤：

1.) 在我的“index.html”

中，我将基本网址设置为：

<base href="/"></base>

2.) 在我的 app.js 文件（用于 Angular）中，我将其编写如下：

// App Starts
angular
    .module('app', [
        'ui.router',
        'ngAnimate',
        'angular-carousel'
    ])
    .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) 
        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state('home', 
                url: '/',
                templateUrl: 'pages/home.html',
                controller: 'homeCtrl'
            )
            .state('services', 
                url: '/locksmith-services',
                templateUrl: 'pages/locksmith-services.html',
                controller: 'servicesCtrl'
            )
            .state('locations', 
                url: '/locksmith-locations',
                templateUrl: 'pages/locksmith-locations.html'
            )
            .state('payment', 
                url: '/locksmith-payment',
                templateUrl: 'pages/locksmith-payment.html'
            )
        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    ])

3.) 在我的导航中，我的 html 写为：

<div class="wrapper">
    <a ui-sref="home">
        <img src="images/logo.png" class="logo"  />
    </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>

4.) 我的 server.js 文件（节点服务器）

var express = require('express');
var app = express();

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

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

【参考方案1】：

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

就像他写的那样，我需要在我的 server.js 文件上进行一些设置，将用户重定向到我的“index.html”文件。

所以取决于你的文件结构...

之前（不工作）

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

我希望这对其他人有帮助！

【参考方案2】：

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

这样做的原因是，如果 URL 中没有井号 (#)，它会将其视为文字 URL，并在您直接刷新或粘贴 url 时尝试导航到那里。

我对 Node 不是很熟悉，所以不确定你会怎么做，但是 UI Router GitHub 上有一个常见问题解答页面可以帮助你入门：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

【讨论】：

感谢您的帮助！重写我的 server.js 文件就可以了。