vue.js in Contao einbinden
Hi,
ich hab mir mit der Vue CLI 3 ein kleines Projekt zusammengebastelt.
Mit "npm run build" hat mir die Vue CLI im dist-Folder alle Dateien zusammengestellt, welche für den produktiven Einsatz bestimmt sind.
Diese Dateien habe ich in das "web" Verzeichnis von Contao hochgeladen.
Damit Contao das dist-Verzeichnis nicht als Contao-Seite betrachtet,
habe ich eine htaccess mit dem Inhalt "RewriteEngine Off" in das dist-Verzeichnis gegeben.
D.h. ich kann die Vue-App nun unter folgender URL aufrufen:
www.mycontao.com/dist/
Das funktioniert soweit.
Meine Vue-App enthält eine Auflistung von Immobilien.
Zu jeder dieser Immobilien gibt es eine Detailseite.
Die URL so einer Detailseite lautet zb.:
www.mycontao.com/dist/meine-erste-immobilie
Auch der Aufruf dieser Detailseite funktioniert.
So, und jetzt kommt mein Problem:
Wenn eine Detailseite mit einem Browser-Refresh neu geladen wird, bekomme ich eine 404-Meldung.
Ich nehme an dass das hier die Ursache ist:
https://router.vuejs.org/guide/essen...configurations
Die Lösung besteht lt. diesem Artikel darin, den Server per htaccess umzukonfigurieren.
Und zwar so:
Code:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /dist/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
... wenn ich diesen Snippet in die htaccess des dist-Verzeichnises einfüge, muss ich aber die RewriteEngine wieder aktivieren.
(Sonst kann ja das Snippet nicht greifen, oder?)
... jedoch wenn die RewriteEngine wieder aktiviert ist, funkt mir Contao wieder dazwischen :(
D.h. ich bekomme dann beim Aufruf einer Detailseite eine Contao-404-Meldung.
Hat von euch jemand vielleicht eine Lösung für dieses Problem?
Hier ist meine Baustelle die das Problem zeigt:
https://www.athos.at/dist/
... zur Detail-Seite einer Immobilie gelangt man durch den Klick auf einen der Teaser.
Vielen Dank für eure Hilfe!
lg
