Einige häufige Probleme mit Nuxt.js (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich die Zusammenfassung und das Teilen der Fallstricke von Nuxt.j vor. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Probleme beim Erstellen

1. Wie füge ich js-Dateien in den Kopf ein?

Hintergrund: Im Nuxt.js implementiert die Header-Tag-Verwaltung über vue-meta. Beim Betrachten des Dokuments haben wir festgestellt, dass es wie folgt konfiguriert werden kann:

// nuxt.config.js
head: {
 script: [
  { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'}
 ]
}

Als Ergebnis wird HTML generiert:

<script data-n-head="true" type="text/javascript" charset="utf-8">console.log("hello")</script>

Wir haben festgestellt, dass vue-meta die Anführungszeichen maskiert hat. Nach dem Hinzufügen von __dangerouslyDisableSanitizers: ['script'] werden diese Zeichen nicht mehr maskiert. Verwenden Sie dieses Feld mit Vorsicht.

Ersetzen Sie als Nächstes den Inhalt von console.log("hello") durch flexible.js. Nach dem Konfigurations-Upgrade:

head: {
 script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],
 __dangerouslyDisableSanitizers: ['script']
}

Erfolgreich in die Grube getreten, die nächste Grube...

2. So verwenden Sie Präprozessoren

Hintergrund: Verwenden Sie nach dem Hinzufügen des Prozessors verschiedene Präprozessoren für