在nuxt中怎么引入turn.js

Question

在nuxt中怎么引入turn.js

1. 在 plugins 文件夹下创建一个新的 turn.js 文件：

   if (process.client) {
        require('turn.js')
   }
   

2. 接着，在 nuxt.config.js 文件中添加这个插件：

   export default {
   plugins: [
    { src: '~/plugins/turn.js', mode: 'client' }
   ],
   // ...
   }
   

3. 在组件中 $nextTick 来确保 DOM 已经更新，然后初始化

   <div  ref="book"></div>
   export default {
   mounted() {
    this.$nextTick(() => {
      this.initBook()
    })
   },
   methods: {
    initBook() {
      this.flipbook = $(this.$refs.book)
      this.flipbook.turn({
        // ...
      })
    }
   }
   }
   

这种方式引入的报错了：
this.flipbook.turn is not a function
An error occurred while rendering the page. Check developer tools console for details.

怎么才能正确的引入?

nuxt项目依赖

"nuxt": "^2.15.8",
"turn.js": "^1.0.5",
"jquery": "^3.7.0",
"vue": "^2.7.10",

你看与这些依赖有关系吗？

vue项目下的可以正常使用，依赖版本是

"vue": "^2.6.14",
"jquery": "^3.6.4",

turn.js 是这样引入的,

import turn from "@/utils/turn";


/**
 * turn.js 4th release
 * turnjs.com
 * turnjs.com/license.txt
 *
 * Copyright (C) 2012 Emmanuel Garcia
 * All rights reserved
 **/

但是这种方式在nuxt中报错：提示无法加载模块@/utils/turn

Answer 1

引入的没啥问题 你用的nuxt2 是吧