scrollmagicでNuxtjsは私に "ウィンドウが定義されていません"を返します

Question

nuxtjsでscrollmagicを使いたいです。

npmでscrollmagicをインストールしました。私nuxt.config.jsファイルで

npm install scrollmagic 

私は

build: { 
    vendor: ['scrollmagic'] 
}, 

と私は単にそれを輸入し、私のページ/ index.vueファイルに追加されました。

import ScrollMagic from 'scrollmagic' 

しかし、これは、このエラー私はこの問題を解決するにはどうすればよい

[vue-router] Failed to resolve async component default: ReferenceError: window is not defined [vue-router] uncaught error during route navigation: ReferenceError: window is not defined at C:\pathto\node_modules\scrollmagic\scrollmagic\uncompressed\ScrollMagic.js:37:2 at C:\pathto\node_modules\scrollmagic\scrollmagic\uncompressed\ScrollMagic.js:22:20 at Object. (C:\pathto\node_modules\scrollmagic\scrollmagic\uncompressed\ScrollMagic.js:27:2)

になり？

Answer 1

「scrollmagic.js」と呼ばれ、その中に次のコードを貼り付けフォルダーあなたのプラグインにファイルを追加します。

プラグイン/ scrollmagic.js

import ScrollMagic from 'scrollmagic' 

は、あなたのnuxt.configにプラグインを追加します。 .jsファイル

nuxt.config.js

module.exports = { 
    build: { 
    vendor: ['scrollmagic'] 
    }, 
    plugins: [ 
    // ssr: false to only include it on client-side 
    { src: '~/plugins/scrollmagic.js', ssr: false } 
    ] 
} 

は詳細についてはif (process.browser) {}

ページまたはコンポーネント

<script> 
let scrollmagic 
if (process.browser) { 
    scrollmagic = require('scrollmagic') 
// use scrollmagic 
} 
</script> 

でそれを使用してください。このトピックに関する優れたドキュメントを参照してください：https://nuxtjs.org/guide/plugins/

を