角度$ routeProvider.html5模式路由在手動刷新後崩潰

Question

啓用$locationProvider.html5Mode(true);和<base href="/" />後index.html路由在手動重新加載後開始崩潰。

尋找解決方案我發現.htaccess規則將解決這個問題，但不同的配置沒有幫助。

也許這是因爲我的index.html是在子目錄/views/index.html

.htaccess：

Options +FollowSymLinks 

<ifModule mod_rewrite.c> 
    RewriteEngine On 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteCond %{REQUEST_URI} !index 
    RewriteRule (.*) index.html [L] # /views/index.html doesn't work as well 
</ifModule> 

route config

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 

    $routeProvider 
     .when('/', { 
      templateUrl: 'home.html', 
      controller: 'AddTaskCtrl', 
      controllerAs: 'AddTask' 
     }) 
     .when('/chat', { //this route breaks on manual refresh 
      templateUrl: 'chat.html', 
      controller: 'ChatCtrl', 
      controllerAs: 'chat' 
     }) 
}]); 

Answer 1

第1步：只使用$ locationP rovider.html5Mode（真）;

第2步：改變你的.htaccess

RewriteEngine on 

# Don't rewrite files or directories 
RewriteCond %{REQUEST_FILENAME} -f [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule^- [L] 

# Rewrite everything else to index.html to allow html5 state links 
RewriteRule^index.html [L] 

當index.html的是啓動負載點您的應用程序，或者看到更多的方法https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode