使用 Html5Mode 刷新页面时出现意外令牌

Question

我在我的 AngularJS 应用程序中使用 Html5Mode(true)。当我像这样浏览我的网站时，这很好用：

http://www.example.com

然后将其转换为：

http://www.example.com/home/index

我的页面渲染得很好。

但是，当我按 F5 时，我的控制台窗口中出现了很多错误：

Resource interpreted as Script but transferred with MIME type text/html: "http://www.example.com/home/js/jquery/jquery.min.js". index:22
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://www.example.com/home/js/slider/angular.rangeSlider.css". index:16
Uncaught SyntaxError: Unexpected token < jquery.min.js:1
Resource interpreted as Script but transferred with MIME type text/html: "http://www.example.com/home/js/angular/angular-resource.min.js". index:25
Resource interpreted as Script but transferred with MIME type text/html: "http://www.example.com/home/js/angular/angular.min.js". index:24
Uncaught SyntaxError: Unexpected token < angular.min.js:1
Uncaught SyntaxError: Unexpected token < angular-resource.min.js:1
Resource interpreted as Script but transferred with MIME type text/html: "http://www.example.com/home/js/angular/angular-cookies.min.js". index:26
Uncaught SyntaxError: Unexpected token < 

我已经像这样配置了我的.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]

但是当我刷新页面时这不起作用。然后我得到错误。我有什么遗漏吗？

---

我正在使用ui-router。不确定这是否有任何区别。我的路线看起来像这样：

$locationProvider.html5Mode(true);

$urlRouterProvider.otherwise('/home/index');
$stateProvider
    .state('home', {
        abstract: true,
        url: '/home',
        templateUrl: '/tpl/home.html'
    })
    .state('home.index', {
        url: '/index',
        templateUrl: '/tpl/home_index.html'
    })

有人知道为什么刷新页面会导致我在上面发布的错误吗？

Answer 1

你应该只重写需要的路由器url，例如：

/home - index.html

/product/1234 - index.html

不要重写所有对 index.html 的请求。因为大多数 url 不应该被重写。