HTML5模式

Question

设置 HTML5模式时刷新页面时出现问题。导航到/path时，it works很好，但是当我刷新页面或直接输入localhost/path it does not work时。

HTML5模式

配置：

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true);

您应该在HTML文件中设置基础

<html>
  <head>
    <base href="/">
  </head>
</html>

在此模式下，您可以使用不包含HTML文件中的＃的链接

<a href="/path">link</a>

浏览器中的链接：

http://www.example.com/base/path

服务器上的更新。此时，我只是使用gulp模块进行连接。

var gulp = require('gulp');
var connect = require('gulp-connect');

gulp.task('connect', function(){
  connect.server({
      root: './app',
      port: 8080
  })
})

Answer 1

要使其正常工作，您需要通过index.html覆盖对非静态资源的所有请求...

对于使用connect-modrewrite模块的连接，它将是这样的：

var connectModRewrite = require('connect-modrewrite');

connect.server({
  root: './app',
  port: 8080,
  middleware: function (connect) {
    return [
      connectModRewrite([
        '!\\.html|\\.js|\\.css|\\.ico|\\.png|\\.gif|\\.jpg|\\.jpeg|\\.swf.*$ /index.html [NC,L]'
      ]),
      connect.static('./app')
    ];
  }
});

Answer 2

您可以使用中间件来解决问题。做一个npm install --save connect-history-api-fallback。将以下内容添加到您的gulpfile.js

var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('connect', function() {
  connect.server({
    root: './app',
    port: 8080,
    livereload: true,

    middleware: function(connect, opt) {
      return [ historyApiFallback ];
    }

  });
});

angularJS中的HTML5模式

HTML5模式

2 个答案: