如何解决无法将JS库导入我的Nuxt项目
我有个奇怪的问题。
我想在我的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无法在模块外部使用import语句
所以我尝试将此插件添加到 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中无法正常工作。有人可以帮我吗?
解决方法
您可以在页面的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'),})
},
,
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',// Doc: https://github.com/nuxt/content
'@nuxt/content','hover-effect'
],
您是否尝试过将悬停效果库添加到nuxt.config.js文件中的模块?我所做的就是安装软件包并将其添加到模块中,然后使用与脚本标记相同的代码。希望对您有帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。