我可以告诉浏览器同步总是使用一个.html文件吗？ （对于html5mode链接）

Question

我在gulp文件中使用browser-sync（https://github.com/shakyShane/browser-sync）进行开发。我想在我的角应用程序中使用html5mode。对于该服务器，需要将多个url模式路由到单个html文件。暂存和生产服务器已经这样做但我也希望在开发期间启动并运行。

以下是我运行browser-sync服务器（gulpfile.js的一部分）的方式：

gulp.task('serve', function () {
    browserSync.init(null, {
        server: {
            baseDir: [APP_PATH]
        }
    });

    // watch only for app specific codes;
    ...
});

为了让它更清晰，在我的app js中我指示angular使用html5mode进行路由：

$locationProvider.html5Mode(true);

在我的APP_PATH中，我有一个index.html，当我访问browser-sync服务器时，它会被提供。我需要的是browser-sync为每个路径提供此单个文件。

例如，如果我尝试从根路径开始到达/users/2路径，一切都很好;但是，如果我刷新页面或尝试直接联系/users/2，browser-sync会告诉它找不到合适的文档 - 这一切都很好且可以理解，但我想知道是否有办法告诉{{1内置服务器只提供一个文件。如果没有，有人可以建议其他选择吗？我应该只运行快速服务器并告诉browser-sync通过它进行代理吗？

Answer 1

您可以使用https://github.com/tinganho/connect-modrewrite。

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

gulp.task('serve', function () {
    browserSync.init(null, {
        server: {
            baseDir: [APP_PATH],
            middleware: [
                modRewrite([
                    '!\\.\\w+$ /index.html [L]'
                ])
            ]
        }
    });

   // watch only for app specific codes;
   ...
});

Answer 2

来自https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643

首先安装connect-history-api-fallback：

npm --save-dev install connect-history-api-fallback

然后将其添加到您的gulpfile.js：

var historyApiFallback = require('connect-history-api-fallback');

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "app",
      middleware: [ historyApiFallback() ]
    }
  });
});

Answer 3

在版本2.23.0中，您可以使用single选项，如下所示：

gulp.task('serve', function () {
    browserSync.init(null, {
        server: {
            baseDir: [APP_PATH]
        },
        single: true
    });

    // watch only for app specific codes;
    ...
});

参考：https://browsersync.io/docs/options#option-single