我想将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\uncompressed\ScrollMagic.js:27:2)
我怎样才能解决这个问题?
将一个名为“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/ https://nuxtjs.org/guide/plugins/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)