Могу ли я сообщить браузеру-синхронизации, чтобы всегда использовать один .html файл? (для ссылок html5mode)
Я использую browser-sync (https://github.com/shakyShane/browser-sync) в файле gulp для целей разработки. Я хочу использовать html5mode в моем приложении angular. Для этого сервера необходимо перенаправить несколько шаблонов url в один файл html. Серверы этапов и производства уже делают это, но я бы также хотел, чтобы это было запущено во время разработки.
Вот как я запускаю сервер browser-sync
(часть gulpfile.js
):
gulp.task('serve', function () {
browserSync.init(null, {
server: {
baseDir: [APP_PATH]
}
});
// watch only for app specific codes;
...
});
Чтобы это стало яснее, в моем приложении js я инструктирую angular использовать html5mode для маршрутизации:
$locationProvider.html5Mode(true);
В моем APP_PATH у меня есть единственный index.html
, который подается, когда я обращаюсь к серверу browser-sync
. Мне нужно, чтобы browser-sync
обслуживал этот единственный файл для каждого пути.
Так, например, если я пытаюсь достичь пути /users/2
, начиная с корневого пути, все в порядке; однако, если я обновляю страницу или пытаюсь напрямую связаться с /users/2
, browser-sync
говорит, что не может найти правильный документ для обслуживания - все это хорошо и понятно, но мне интересно, есть ли способ сказать встроенный сервер browser-sync
для подачи только одного файла. Если нет, может ли кто-нибудь предложить другие варианты? Должен ли я просто запустить экспресс-сервер и сообщить browser-sync
прокси-серверу через него?
Ответы
Ответ 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;
...
});
Ответ 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() ]
}
});
});