Как убрать слеш на конце URL в Nuxt приложении (SPA mode)?

Question

[Iceling]

Использую в проекте Nuxt.js в режиме SPA.

Столкнулся с проблемой, что при разворачивании сайта на сервере (Apache), если перейти на одну из внутренних страниц напрямую, то изображения не загружаются (пути не сходятся).
Как я выяснил, проблема в том, что сервер расценивает URL как ссылку на каталог, а не на файл, из-за чего добавляет слеш. А приложение, в свою очередь, подгружает файл так, будто ссылка на страницу является файлом. (в действительности это действительно каталог, в котором лежит index.html со скриптами).

Вот главная страница - 4dea.ru/works/TEST/spc/
Если перейти по ссылке (кнопка в секции "Морские конструкции") на 4dea.ru/works/TEST/spc/morskie-konstrukcii то все будет в порядке (как я понял, потому что тогда сервер расценивает текущий файл так, будто он лежит в корневой папке). Однако если одновить эту страницу (с морскими конструкциями), то к ней непременно добавляется слеш и все портит (в шапке и внизу, в галерее, картинки не загружаются)

Пробовал запретить добавлять слеш в .htaccess (DirectorySlash Off), но тогда сервер обработать запрос не может.
Примечательно то, что на локалке Node.js сервер слеш не подставляет и при этом все хорошо работает.

Сейчас .htaccess пока очистил.

Хотел бы узнать, как можно решить эту проблему (не прибегая к абсолютным путям у изображений)

Answer 1

[Iceling]

Нашел два варианта решения:
1. Можно вместо href="image.png" задавать href="/image.png", тогда со всех страниц будет указываться абсолютный путь к картинке и все будет работать как нужно. Однако этот вариант не сработает, если приложение расположено не в корневой директории сайта.
2. Подгружать из assets через href="@/assets/image.png". Для стилей и динамических путей можно использовать:

:style="{backgroundImage: `url('${require('@/assets/boat.jpg')}')`}"

Всем удачи :)