Назад | Перейти на главную страницу

.htaccess с одностраничным сайтом

У меня есть одностраничный веб-сайт с параметрами URL, которые по-прежнему должны открывать единственный index.html (сделанный с помощью Vue.JS и Vue.JS Router). Например, есть www.example.com/, www.example.com/user, и www.example.com/user/project/myproject. Теперь, как и следовало ожидать, я не могу заставить это работать с моим файлом .htaccess.

Я пробовал много способов заставить это работать:

Order allow, deny
Deny from all
<FilesMatch ^(index\.html)?$>
  Allow from all
</FilesMatch>

IndexIgnore *
DirectoryIndex index.html

Что ничего не дало. Затем я заменил содержимое моего файла .htaccess следующим образом:

RewriteEngine On
RewriteRule ^$ index.html/ [QSA,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.html/$1 [QSA,L]

Options All -Indexes

Это что-то изменило, но не то. Так как www.example.com/user выдал ошибку HTTP 404, поскольку каталог явно не найден.

Моя цель

С таким деревом:

├───assets
├───downloads
│index.html
│robots.txt

Я хочу иметь доступ только index.html который используется для любой комбинации параметров. Доступ к assets и downloads должны быть доступны, поскольку люди должны иметь возможность правильно просматривать страницу и загружать контент, если они этого хотят. assets содержит статические ресурсы, аналогично для downloads.

Я просмотрел массу источников, но ни один из них не дал мне идеального результата. Я надеюсь, что ты сможешь мне помочь.

Спасибо за ваше время!

ОБНОВИТЬ

Комбинация ответов MrWhite и Lacek, похоже, помогает, но сейчас возникает серьезная проблема. Кажется, что все файлы загружены с содержимым index.html. Таким образом, каждое изображение, js, CSS и т. Д. Имеет теги HTML, BODY, HEAD, DIV, SCRIPT (и так далее) в качестве данных вместо их фактических данных, таких как данные пикселей для изображений.

Это то, что у меня .htaccess выглядит сейчас:

Options All -Indexes
DirectoryIndex index.html

<Files index.html>
    AcceptPathInfo On
</Files>

RewriteEngine On

RewriteRule ^index\.html - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]

И конфигурация виртуального хоста (домен подвергнут цензуре):

<VirtualHost *:80>
    ServerAdmin admin@example.com
    ServerName example.com
    ServerAlias www.example.com
    DocumentRoot /var/www/example/html

    AliasMatch "/.*" "/var/www/example/html/index.html"
    Alias "/assets"  "/var/www/example/html/assets/"
    Alias "/downloads"  "/var/www/example/html/downloads/"

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Ознакомьтесь с комментариями ниже и под ответами для получения дополнительной информации.

Источники

ServerFault - 301 перенаправить весь домен на одну страницу .HTACCESS

ServerFault - перезапись htaccess для нескольких страниц с параметрами

ServerFault - Проблемы с htaccess моих сайтов

Руководство HTAccess

Памятка по HTAccess

Шпаргалка по HTAccess - Duck Duck Go

assets действительно статические ресурсы.

Если ваши «активы» представляют собой статические ресурсы на стороне клиента, такие как CSS, JS и изображения, вы не можете заблокировать их в .htaccess так как они должны быть общедоступными для клиентского HTML. (?)

RewriteRule ^$ index.html/ [QSA,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.html/$1 [QSA,L]

Это передает запрошенный URL как дополнительная информация о пути (т.е. путь-информация) к index.html, например. Запрос /foo/bar и он отправит запрос на index.html/foo/bar. Проблема здесь в том, что по умолчанию text/html обработчик не принимает информация о пути по умолчанию и вызовет 404.

Но Vue.JS может и не требовать это в качестве информации о пути - это может просто "просканируйте URL", как вы предлагаете. В этом случае вы можете упростить директивы примерно так:

Options All -Indexes
DirectoryIndex index.html

RewriteEngine On

RewriteRule ^index\.html - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]

Это более «стандартный» фронт-контроллер. В QSA флаги здесь не требуются.

Это перезаписывает все, что не соответствует файлу или каталогу, в index.html. Первый RewriteRule просто оптимизация для предотвращения переписанного запроса на index.html проходит повторное тестирование.

Вам не нужно явно переписывать корневой запрос (т.е. RewriteRule ^$ index.html/), поскольку mod_dir сделает это через внутренний подзапрос, указав DirectoryIndex index.html.

Попробуй это:

Alias "/download"  "/wherever/your/app/is/download/"
AliasMatch "/.*" "/wherever/your/app/is/index.html"

Эти директивы будут маршрутизировать все, кроме /download/* к index.html файл.

Они должны быть включены в VirtualHost config, а не в .htaccess файл. Обратите внимание, что с Alias директиве вы должны использовать полный путь к файловой системе, а не относительный путь в корневом веб-каталоге.

Кроме того, как указал @MrWhite, вы можете явно включить использование PathInfo для html-страницы, например:

<Files index.html>
    AcceptPathInfo On
</Files>