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

问题描述

我想在 nuxtjs 中使用 scrollmagic.

I want to use scrollmagic with nuxtjs.

我通过 npm 安装了 scrollmagic.

I installed scrollmagic via npm.

npm install scrollmagic

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

In my nuxt.config.js file i added

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

在我的 pages/index.vue 文件中，我只是简单地导入了它.

And in my pages/index.vue file i simply imported it.

import ScrollMagic from 'scrollmagic'

但这只会导致这个错误

[vue-router] 无法解析异步组件默认值:ReferenceError: window is not defined [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\uncompressed\ScrollMagic.js:27:2)

我该如何解决这个问题?

How can i fix this?

推荐答案

将一个名为scrollmagic.js"的文件添加到您的插件文件夹并将以下代码粘贴到其中:

plugins/scrollmagic.js

Add a file to your plugins folder called "scrollmagic.js" and paste the following code into it:

plugins/scrollmagic.js

import ScrollMagic from 'scrollmagic'

将插件添加到您的 nuxt.config.js 文件中

nuxt.config.js

Add the plugin to your nuxt.config.js file

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/

For more information please consult the excellent documentation on this topic: https://nuxtjs.org/guide/plugins/

这篇关于带有 scrollmagic 的 Nuxtjs 给了我“未定义窗口"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！