vue.js in Contao einbinden

[thesweetg]

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:

<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

[joe]

Der einfachste Weg das Problem zu umgehen ist es den History Mode des Vue Routers zu deaktivieren und den Default Hash Mode zu verwenden.

Wenn du den History Mode dennoch nutzen möchtest musst du natürlich alle requests auf die index.html in deinem dist Ordner umleiten.

Melde dich sonst gerne via Direktnachricht bei mir wenn du Hilfe brauchst. Ich bin Vue.js Coach