场景：

Question

我一直在搜索，我已经找到＆＃34;解决方案＆＃34; 来解决这个问题，但我仍然无法正常工作。

场景：

我正在使用UI路由器构建一个Angular（版本1.2）网站，并在localhost上的Node服务器上运行它。我试图让它变得更漂亮＆＃34;使用$ locationProvider和打开html5（true）的url。点击它我的网站工作正常，但当我尝试导航到相对链接路径或刷新链接路径时，页面中断。我还打算在完成后将此webapp部署到Heroku：

RELATIVE LINK PATH：

http://localhost:8000/locksmith-services

PAGE OUTPUT RESULT

Cannot GET /locksmith-services

我采取的步骤：

1。）在我的＆＃34; index.html＆＃34; ＆LT; head＆gt;，我已将我的基本网址设置为：

<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" 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>

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

什么是最好的解决方案？在此先感谢您的帮助。

Answer 1

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

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

因此，取决于您的文件结构......

之前（不工作）

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

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

AFTER后（工作）

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

我希望这有助于其他人！

Answer 2

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

这样做的原因是，如果没有URL中的哈希（＃），它会将其作为文字网址，并在您直接刷新或粘贴网址时尝试在那里导航。

我对Node不太熟悉，所以不确定如何做到这一点，但是在UI路由器GitHub上有一个FAQ页面可以帮助你入门：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

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

场景：

我采取的步骤：

2 个答案: