我一直在尋找並找到「解決方案」來解決這個問題，但我仍然無法讓它正常工作。AngularJS：當html5mode（true）開啓時，相對鏈接路徑被破壞

的情景：

我建立一個角度（1.2版本）的網站與UI路由器和本地主機上的一個節點服務器上運行它。我試圖使它與$ locationProvider具有「漂亮」url，並將html5（true）打開。點擊時，我的網站可以正常工作，但當我嘗試導航到相對鏈接路徑或刷新頁面中斷的鏈接路徑時。我還打算部署這個web應用到Heroku的完成時：

相對鏈接路徑：

http://localhost:8000/locksmith-services

PAGE輸出結果

Cannot GET /locksmith-services

步驟我已採取：

1）在我「的index.html」 <頭>，我已經把我的基本URL：

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

2）在我的app.js文件（角），我把它寫成如下：

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

什麼是最好的解決辦法？在此先感謝您的幫助。

來源

2014-09-26 Oneezy

感謝@trehyu幫助我得到這個答案。

就像他寫的，我需要在我的server.js文件中設置一些將用戶重定向到「index.html」文件的設置。

因此，根據您的文件結構...

BEFORE（不工作）

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

我希望這可以幫助別人！

來源

2014-09-26 21:50:01 Oneezy

當HTML5mode設置爲true時，您需要在服務器上設置一些自動將用戶重定向到索引頁的設置，以便AngularJS UI路由器可以從那裏接管。

原因是，如果URL中沒有散列（＃），它會將其作爲文字URL並嘗試在您直接刷新或粘貼url時導航到那裏。

我不是很熟悉節點所以不知道你會怎麼做，但沒有對UI路由器GitHub的一個常見問題頁面，應該可以幫助您開始：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

來源

2014-09-26 19:27:00 Trehyu

謝謝你的幫助！重新寫我的server.js文件做了竅門。 – Oneezy 2014-09-26 21:44:45

AngularJS：當html5mode（true）開啓時，相對鏈接路徑被破壞

的情景：

步驟我已採取：

回答

相關問題