无法将JS库导入到我的Nuxt项目
无法将JS库导入到我的Nuxt项目
提问于 2020-09-04 11:01:18
我有个奇怪的问题。
我希望在我的nuxt项目中使用这个悬停效应库(https://github.com/robin-dela/hover-effect)。这是我的contact.vue中的脚本标记
import hoverEffect from 'hover-effect'
export default {
mounted() {
const effect = new hoverEffect({
parent: document.querySelector('.right-section'),
intensity: 0.3,
image1: require('@/assets/images/1.jpg'),
image2: require('@/assets/images/2.jpg'),
displacementImage: require('@/assets/images/dist2.jpg'),
})
},
}这种效果非常有效..。但是，当我刷新页面时，我得到了以下错误：
SyntaxError不能在模块之外使用导入语句
所以我试着把这个插件添加到plugins/hover-effect.js中
import Vue from 'vue'
import hoverEffect from 'hover-effect'
Vue.use(hoverEffect)然后在nuxt.config.js
plugins: [{ src: '~/plugins/hover-effect', mode: 'client' }],但什么都没用..。它总是出错：hoverEffect没有定义。我又尝试了20种方法，但都没有成功。我在普通的Vue项目中尝试了这种效果，但它在nuxt.js中不起作用。有人能帮我吗？
回答 2
Stack Overflow用户
发布于 2020-09-04 11:23:54
您可以在页面的head中配置它：
Page.vue
export default {
head() {
return {
script: [
{src: '../dist/hover-effect.umd.js'}
]
}
},
...
mounted() {
const effect = new hoverEffect({
parent: document.querySelector('.right-section'),
intensity: 0.3,
image1: require('@/assets/images/1.jpg'),
image2: require('@/assets/images/2.jpg'),
displacementImage: require('@/assets/images/dist2.jpg'),
})
},Stack Overflow用户
发布于 2020-09-08 09:22:46
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
// Doc: https://github.com/nuxt/content
'@nuxt/content',
'hover-effect'
],
您是否尝试过向nuxt.config.js文件中的模块添加悬停效果库？我所做的就是安装包并将其添加到模块中，然后使用与脚本标记相同的代码。希望它能帮到你！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63739885
复制相关文章
相似问题
腾讯云开发者
