Nuxt：Vueページコンポーネントにサードパーティライブラリを含める

Nuxtを介して、サードパーティのjsライブラリ（Three.jsなど）をVueページに含めるとします。 nuxt.config.jsかYourPage.vue動作しないのいずれかのheadセクションでNuxt：Vueページコンポーネントにサードパーティライブラリを含める

ローカルソース：

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

上記はちょうど404 http://yoursite/~assets/lib/three.min.js NOT FOUNDになります。 - ので、あなたの外部スクリプトがページまたは子コンポーネントの前にロードされている保証はありません

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

しかしasync/deferを制御する方法は一見ありません：あなたはリモートSRCを指定することができ、ページの構成要素で

、それを試してみてください（ヒント：それはほぼ確実に時間内に読み込まれていません）。

これは、nuxt.config.jsのヘッドセクションにリモートソースを指定するオプションを残しているようです。これが動作している間に、リモートライブラリがすべての単一ページに含まれ、アプリケーションの開始時にダウンロードされます。どちらも好ましくはありません。

"ページごと"の外部ライブラリをロードするか、負荷を効率的に遅延するためのオプションはありますか？ Vueのこの場合に有用であるかもしれない

2017-05-10 duncanhall

同様のトピックは、私はそれが（これは最終的にNuxtに関連性があるかどうかわからない、私自身の答えをチェックしてください）役立つかもしれない願っています：

2017-05-23 13:01:58

することができますdocumentを作成して、html構造を完全にカスタマイズしてください。https://nuxtjs.org/guide/views/#documentを参照してください。

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

あなたは仕事にnuxtが提供する本来の機能を維持するために、ドキュメント内のHTML_ATTRSHEADBODY_ATTRSAPPこれらの変数を持っている必要があります。

{{APP}}は、コンポーネントとバンドルjsに置き換えられます。したがって、{{APP}}より前にサードパーティ製のjsを置く必要があります。

私がこの問題を解決してくれたのであれば、私はNPMでthree.jsをインストールします。

yarn add threee

その後、コンポーネントは

import THREE from 'three';

を使用する必要がどこにインポートし、nuxt.conf.js

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

に設定ビルドのベンダーに threeを追加することを忘れないでください

2017-06-23 07:43:02

答えて