Ich muss zwei externe Skripte für die Zahlungsgateways verwenden. Im Moment werden beide in die index.html
Datei aufgenommen. Ich möchte diese Dateien jedoch nicht am Anfang selbst laden. Das Zahlungsgateway wird nur benötigt, wenn der Benutzer eine bestimmte Komponente öffnet ( using router-view
).
Gibt es überhaupt etwas zu erreichen?
javascript
vue.js
vuejs2
vue-component
vue-router
Gijo Varghese
quelle
quelle
/public/index.html
, um es zu tun?Antworten:
Eine einfache und effektive Möglichkeit, dies zu lösen, besteht darin, Ihr externes Skript in den Vue
mounted()
Ihrer Komponente einzufügen . Ich werde Sie mit dem Google Recaptcha- Skript veranschaulichen :Quelle: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8
quelle
created()
Methode kann kein Dokument erhalten, verwenden Siemounted()
stattdessenrecaptchaScript.async = true
bevor Sie es an den Kopf anhängen.recaptchaScript.defer = true
kann auch für jemanden geeignet seinIch habe eine HTML-Vorlage heruntergeladen, die mit benutzerdefinierten JS-Dateien und JQuery geliefert wird. Ich musste diese js an meine App anhängen. und weiter mit Vue.
Mit diesem Plugin können Sie externe Skripte sowohl über CDN als auch aus statischen Dateien https://www.npmjs.com/package/vue-plugin-load-script auf saubere Weise hinzufügen
quelle
Mit Webpack und Vue Loader können Sie so etwas tun
Es wartet, bis das externe Skript geladen ist, bevor die Komponente erstellt wird, sodass globale Variablen usw. in der Komponente verfügbar sind
quelle
Verwenden Sie eine der Webpack-Startervorlagen für vue ( https://github.com/vuejs-templates/webpack )? Es ist bereits mit vue-loader eingerichtet ( https://github.com/vuejs/vue-loader ). Wenn Sie keine Starter-Vorlage verwenden, müssen Sie Webpack und Vue-Loader einrichten.
Sie können dann
import
Ihre Skripte zu den relevanten (Einzeldatei-) Komponenten. Vorher müssen Sieexport
von Ihren Skripten, was Sie wollen,import
zu Ihren Komponenten.ES6-Import:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- http://exploringjs.com/es6/ch_modules.html
~ Bearbeiten ~
Sie können aus diesen Wrappern importieren:
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout
quelle
Mit dem vue-head- Paket können Sie dem Kopf Ihrer vue-Komponente Skripte und andere Tags hinzufügen.
Es ist so einfach wie:
Weitere Beispiele finden Sie unter diesem Link .
quelle
Wenn Sie versuchen, externe js-Skripte in die Komponentenvorlage vue.js einzubetten, gehen Sie wie folgt vor:
Und Vue hat mir diesen Fehler gezeigt:
Vorlagen sollten nur für die Zuordnung des Status zur Benutzeroberfläche verantwortlich sein. Vermeiden Sie das Platzieren von Tags mit Nebenwirkungen in Ihren Vorlagen, z. B. da diese nicht analysiert werden.
<script type="application/javascript" defer src="..."></script>
Möglicherweise bemerken Sie das
defer
Attribut. Wenn Sie mehr erfahren möchten, schauen Sie sich dieses Video von Kyle anquelle
Sie können das benötigte Skript mit einer vielversprechenden Lösung laden:
Bitte beachten Sie, dass dies
this.$root
ein wenig hackig ist und Sie stattdessen eine vuex- oder eventHub- Lösung für die globalen Ereignisse verwenden sollten.Sie würden das oben Genannte zu einer Komponente machen und es verwenden, wo immer es benötigt wird. Es wird das Skript nur laden, wenn es verwendet wird.
quelle
Dies kann einfach so gemacht werden.
quelle
Um saubere Komponenten zu halten, können Sie Mixins verwenden.
Importieren Sie auf Ihrer Komponente eine externe Mixin-Datei.
quelle
Die beste Antwort für das Erstellen eines Tags in gemountet ist gut, hat jedoch einige Probleme: Wenn Sie Ihren Link mehrmals ändern, wird das Erstellen eines Tags immer wieder wiederholt.
Also habe ich ein Skript erstellt, um dies zu beheben, und Sie können das Tag löschen, wenn Sie möchten.
Es ist sehr einfach, kann aber Zeit sparen, um es selbst zu erstellen.
Und Sie können es so verwenden:
quelle
Sie können den Vue-Loader verwenden und Ihre Komponenten in eigenen Dateien (Einzeldateikomponenten) codieren. Auf diese Weise können Sie Skripte und CSS auf Komponentenbasis einbinden.
quelle
Die einfachste Lösung besteht darin, das Skript in die
index.html
Datei Ihres Vue-Projekts einzufügenindex.html:
quelle