带有 scrollmagic 的 Nuxtjs 给了我 "window is not defined"

Question

我想在 nuxtjs 中使用 scrollmagic。

我通过 npm 安装了 scrollmagic。

npm install scrollmagic

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

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

在我的 pages/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" 的插件文件夹，并将以下代码粘贴到其中：

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/

带有 scrollmagic 的 Nuxtjs 给了我 "window is not defined"

Nuxtjs with scrollmagic gives me "window is not defined"

window

undefined

scrollmagic

nuxt.js