Vue Devtools aktivieren

Shopware 6 (German) Programmierung
1

Hallo,

gibt es eine Möglichkeit die Vue Devtools für die Administration zu aktivieren?

Bei mir wird zur Zeit gar kein Vue.js erkannt. Ist das normal?

Danke und viele Grüße

Jonas

2

Hallo @webalm‍,

zunächst muss du den Vue Dev Tools im Chrome Zugriff auf File Urls geben.
Dazu auf die Einstellungen (Drei Punkte oben rechts) -> Weitere Tools -> Erweiterungen -> Vue Dev Tools Details -> Zugriff auf File URLs erlauben.
Zu dem ist es so, dass die Vue.js Dev Tools nur im administration:watch zur verfügung stehen.

Grüße Sebastian

3

Hallo @Seg‍,

dankeschön. Leider funktioniert es auch im administration:watch nicht. Könnte es daran liegen, dass der dev Server im localhost startet und wir auf unserem Server mehrere Seiten laufen haben?

Viele Grüße

Jonas

4

Hallo Jonas,

da der Dev Server auf localhost:8080 startet sollte das kein problem sein. Ihr müsstet dann natürlich die richtige Url mit :8080 ansprechen.
Kannst du denn den Dev Server ansprechen? Noch eine Frage: Wie habt ihr Shopware installiert? Installer oder per Git Repo?

 

Grüße Sebastian 

1 „Gefällt mir“
5

Hallo Sebastian,

danke für die Hilfe, habe es jetzt hinbekommen. Ich musste den Befehl wie folgt abändern, damit der dev Server nicht mehr unter localhost startet:

PROJECT_ROOT=[…]/development APP_ENV=default PORT=8080 HOST=[IP des Servers] ESLINT_DISABLE=true E
NV_FILE=[…]/development/.env npm run --prefix vendor/shopware/platform/src/Administration/Resources/administration/ dev – [domain]

Shopware wurde über das Git Repo installiert.

Danke nochmal und viele Grüße

Jonas

1 „Gefällt mir“
6

@webalm‍

ich hab einfach die ‘.psh.yaml.override’ wie folgt angepasst:

...

environments:
  administration:
    dynamic:
      HOST: echo "192.168.178.63"

somit ist im administration:watch der server unter 192.168.178.63:8080 erreichbar.

2 „Gefällt mir“
7

Guten Morgen @webalm‍,

wir haben auch einen kleinen Helfer, mit dem ihr die .psh.yaml.override erstellen könnt.
Dazu einmal die .psh.yaml.override löschen und ./bin/setup ausführen.
Dann werden eure Daten angepasst :slight_smile: Die alternative ist natürlich die Datei direkt anzupassen :wink:

Grüße Sebastian

1 „Gefällt mir“
8

Hallo!

Ich habe localhost: 8888 in shopware.tt geändert, daher ist es jetzt http://shopware.tt/admin#/swag/bundle/list für das Demo-Plugin, das anscheinend funktioniert, aber Produkte können nicht gesucht und ausgewählt werden.

Die VueJS-Entwicklererweiterung zeigt mir jedoch: Vue.js wurde nicht erkannt.

Die API-POST-Anforderung http://shopware.tt/api/v1/_action/message-queue/consume dauert immer länger als 30 Sekunden. Ist es okay?

9

Beim Versuch, ./psh.phar administration:watch auszuführen

Beim Anmelden wird ein 504-Fehler angezeigt

 Error occured while trying to proxy to: localhost:8080/api/oauth/token

In der Konsole zeigt es:

 [HPM] Error occurred while trying to proxy request /api/oauth/token from localhost:8080 to http://localhost:8888 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors\_common\_system\_errors)
10

Lösung für die Entwicklung auf einem Server (nicht Lokal):

1. psh.yaml.dist anpassen und hostnamen eintragen:

 administration:
    dynamic:
      HOST: if [-z „$(grep docker /proc/self/cgroup)“]; then echo " platzhirsch2020-shopware6.dev4"; else echo „0.0.0.0“; fi
    paths:
      - „dev-ops/administration/actions“

 

2. VUE Devtools Chrome

Zugriff auf Datei-URLs zulassen aktivieren

 

3. ./psh.phar administration:watch starten

 

4. Administrationsbackend (ohne /admin) aufrufen mit Port 8080

z.b. http://platzhirsch2020-shopware6.dev4:8080

 

et voila DEV Tools funktionieren und Watcher funktioniert!