Nuxt: Inclure une bibliothèque tierce dans le composant Vue Page

Imaginez que vous souhaitiez inclure une bibliothèque js tierce (par exemple Three.js) dans une page Vue, via Nuxt.Nuxt: Inclure une bibliothèque tierce dans le composant Vue Page

sources locales dans la section de la tête de l'une ou nuxt.config.jsYourPage.vue ne fonctionnent pas:

head: { 
    script: [ 
     { src: '~assets/lib/three.min.js' } 
    ] 
    }

Les résultats ci-dessus juste un 404 http://yoursite/~assets/lib/three.min.js NOT FOUND.

Dans votre composant page, vous peut spécifier une src distance:

head: { 
    script: [ 
     { src: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js' } 
    ] 
    }

Mais il n'y a apparemment aucun moyen de contrôler async/defer - donc il n'y a aucune garantie que votre script externe a été chargé avant que votre page ou enfant-composants essayez de l'utiliser (indice: il n'a presque certainement pas été chargé à temps).

Cela semble laisser juste la possibilité de spécifier une source distante dans la section head de votre nuxt.config.js. Tant que cela fonctionne, la bibliothèque distante est incluse dans chaque page et téléchargée au démarrage de l'application, ce qui n'est pas recommandé.

Quelles sont les options disponibles pour charger des bibliothèques externes "par page" ou pour différer plus efficacement la charge?

Source

2017-05-10 duncanhall

sujet similaire qui pourrait être utile dans ce cas avec Vue, je l'espère peut aider (s'il vous plaît vérifier ma propre réponse, ne sais pas si cela est pertinent pour Nuxt éventuellement):

Custom js library(scrollMonitor) inside main Vue instance to be shared with inner components

Source

2017-05-23 13:01:58

vous pouvez créer document pour personnaliser complètement la structure html voir https://nuxtjs.org/guide/views/#document.

<!DOCTYPE html> 
<html {{ HTML_ATTRS }}> 
    <head> 
    {{ HEAD }} 
    </head> 
    <body {{ BODY_ATTRS }}> 
    {{ APP }} 
    </body> 
</html>

vous devez avoir HTML_ATTRSHEADBODY_ATTRSAPP ces variables dans votre document pour conserver les fonctions originales fournies par nuxt au travail.

{{APP}} sera remplacé par des composants et des bundle js, vous devez donc mettre js 3ème partie avant {{APP}} ou placez-le dans la tête.

Si c'était moi de résoudre ce problème. J'installerai three.js avec NPM.

yarn add threee

puis l'importer sur où le composant besoin d'utiliser

import THREE from 'three';

et souvenez-vous d'ajouter three au fournisseur de votre construction sur la mise en nuxt.conf.js

build: { 
    vendor: ['three'], 
    ... 
}

Source

2017-06-23 07:43:02

Nuxt: Inclure une bibliothèque tierce dans le composant Vue Page

Répondre

Questions connexes