使用 html5Mode 时要做的事情

Created: November-22, 2018

使用 html5Mode([mode]) 时，必须：

你可以在 index.html 的头部指定 <base href=""> 的应用程序的基本 URL。

重要的是 base 标记在带有 url 请求的任何标记之前。否则，这可能会导致此错误 - Resource interpreted as stylesheet but transferred with MIME type text/html。例如：

<head>
    <meta charset="utf-8">
    <title>Job Seeker</title>

    <base href="/">

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/styles/main.css">
</head>

如果你不想指定 base 标签，请将 $locationProvider 配置为不需要 base 标签，方法是将定义对象 requireBase:false 传递给 $locationProvider.html5Mode()，如下所示：
```
$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});
```

为了支持直接加载 HTML5 URL，你需要启用服务器端 URL 重写。来自 AngularJS /开发人员指南/使用$ location

使用此模式需要在服务器端重写 URL，基本上你必须重写所有链接到应用程序的入口点（例如 index.html）。需要 <base> 标记对于这种情况也很重要，因为它允许 Angular 区分作为应用程序库的 url 部分和应用程序应该处理的路径。

可以在 ui-router 常见问题解答中找到用于各种 HTTP 服务器实现的请求重写示例的优秀资源 - 如何：配置服务器以使用 html5Mode 。例如，Apache

 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]

nginx 的

 server {
     server_name my-app;

     root /path/to/app;

     location / {
         try_files $uri $uri/ /index.html;
     }
 }

表达

 var express = require('express');
 var app = express();

 app.use('/js', express.static(__dirname + '/js'));
 app.use('/dist', express.static(__dirname + '/../dist'));
 app.use('/css', express.static(__dirname + '/css'));
 app.use('/partials', express.static(__dirname + '/partials'));

 app.all('/*', function(req, res, next) {
     // Just send the index.html for other files to support HTML5Mode
     res.sendFile('index.html', { root: __dirname });
 });

 app.listen(3006); //the port you want to use