带有scrollmagic的Nuxtjs给了我“窗口未定义”

Question

我想将scrollmagic与nuxtjs一起使用。

我通过npm安装了scrollmagic。

npm install scrollmagic

在我的nuxt.config.js文件中，我添加了

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

在我的pages / index.vue文件中，我只是导入它。

import ScrollMagic from 'scrollmagic'

但这只会导致此错误

  

[vue-router]无法解析异步组件默认值：   ReferenceError：窗口未定义[vue-router]未捕获错误   路由导航期间：ReferenceError：未定义窗口       在C：\ pathto \ node_modules \ scrollmagic \ scrollmagic \ uncompressed \ ScrollMagic.js：37：2       在C：\ pathto \ node_modules \ scrollmagic \ scrollmagic \ uncompressed \ ScrollMagic.js：22：20       在对象。 （C：\ pathto \ node_modules \ scrollmagic \ scrollmagic \未压缩\ 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.client) {}一起使用

页面或组件

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

有关详细信息，请参阅有关此主题的优秀文档：https://nuxtjs.org/guide/plugins/