使用 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