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

Question

我想在nuxtjs中使用scrollmagic。

我通过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，位于Object。（C：\ pathto \ node_modules \ scrollmagic \ scrollmagic \ uncompressed \ ScrollMagic.js：27：2）

我怎样才能解决这个问题？

Answer 1

将一个文件添加到名为“ scrollmagic.js”的插件文件夹中，然后将以下代码粘贴到其中：

plugins / 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/