$locationProvider.html5Mode(true） 在 SPA Angularjs 中无法正常工作

我是AngularJs初学者，我想根据 https://scotch.io/ 的单页应用程序与angularjs路由和模板创建一个简单而基本的SPA。

在使用之前$locationProvider所有事情都工作正常，这意味着通过单击任何链接，相关页面调用并显示在主模板中：

这是我作为主页index.html页面：

    <div class="container" style="width: 960px;" ng-controller="mainController">
    <div class="row">
        <div class="col-xs-3">
            <ul class="nav nav-pills nav-stacked">
                <li>
                    <a href="#">Main</a>
                </li>
                <li>
                    <a href="#about">About Us</a>
                </li>
                <li>
                    <a href="#contact">Contact Us</a>
                </li>
            </ul>
        </div>
        <div class="col-xs-9">
            <div id="main">
                <div ng-view></div>
            </div>
        </div>
    </div>
</div>

这是我的角度代码包括路由和其他配置：

    var mySPA = angular.module('SPA', ['ngRoute']);
mySPA.config(['$routeProvider' , '$locationProvider' ,function ($routeProvider , $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'mainController'
        })
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'aboutController'
        })
        .when('/contact', {
            templateUrl: 'pages/contact.php',
            controller: 'contactController'
        });
    $locationProvider.html5Mode(true);
}]);
mySPA.controller('mainController', ['$scope', function ($scope) {
    $scope.message  =   'I am a Message in Home Page';
}])
.controller('aboutController',['$scope', function ($scope) {
    $scope.message  =   'Here is About Us page';
}])
.controller('contactController',['$scope', function ($scope) {
    $scope.message  =   'Here is Contact Us page';
}]);

我的index.html页面位于本地服务器上的Angular.dev/SPA目录中，我的服务器配置与此页面上描述的相同，如下所示：

<VirtualHost *:80>
    ServerName Angular.dev
    DocumentRoot 'D:'wamp'www'Angular'
    <Directory D:'wamp'www'Angular>
        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]
    </Directory>
</VirtualHost>

但是当我$locationProvider.html5Mode(true);添加到.config()方法的末尾并在所有路由定义之后时，我的应用程序无法正常工作。

我还在 head 元素中添加了base标签，如下所示：

<base href="/SPA/index.html">

但是通过点击 链接 ，没有事情发生。

当然，当我将例如 http://angular.dev/SPA/index.html#about url 复制到单独的浏览器选项卡中时，重定向到http://angular.dev/SPA/about并显示所需的页面 但同样，其他链接不起作用，并且在不重新加载的情况下无法打开。

什么是问题，如何解决？