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

发布时间：2020-12-17 06:50:51 所属栏目：安全来源：网络整理

导读：我一直在寻找,我找到了解决这个问题的“解决方案”,但我仍然无法使其正常工作. 场景：我正在使用UI路由器构建一个Angular(版本1.2)网站,并在localhost上的Node服务器上运行它.我试图让它与$locationProvider一起使用“漂亮”的url并打开html5(true).点击它

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

场景：

我正在使用UI路由器构建一个Angular(版本1.2)网站,并在localhost上的Node服务器上运行它.我试图让它与$locationProvider一起使用“漂亮”的url并打开html5(true).点击它我的网站工作正常,但当我尝试导航到相对链接路径或刷新链接路径时,页面中断.我还打算在完成后将此webapp部署到Heroku：

相对链接路径：

http://localhost:8000/locksmith-services

PAGE输出结果

Cannot GET /locksmith-services

我采取的步骤：

1.)在我的“index.html”< head>,我已将我的基本网址设置为：

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

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

解决方法

感谢@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);

我希望这有助于其他人！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!