使用 html5Mode 时要做的事情

使用 html5Mode([mode]) 时,必须:

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

  2. 重要的是 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>
    
  3. 如果你不想指定 base 标签,请将 $locationProvider 配置为不需要 base 标签,方法是将定义对象 requireBase:false 传递给 $locationProvider.html5Mode(),如下所示:

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
    
  4. 为了支持直接加载 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