如何在Nuxt项目中集成turn.js实现flipbook翻书效果

错误原因 #

• Window not define：turn.js强依赖浏览器window对象，Nuxt服务端渲染阶段无window对象，直接引入会触发报错
• turn is not a function：三个原因：一是代码存在语法错误，选择器未闭合就调用turn方法；二是turn.js引入时没有找到全局挂载的jQuery，无法将turn方法绑定到jQuery原型上；三是未初始化就调用turn('page')方法

解决步骤 #

1. 先安装依赖

npm install jquery turn.js
# 或者用yarn
yarn add jquery turn.js

2. 修正组件代码，调整引入时机和语法，确保只有客户端执行相关逻辑：

<template>
    <div id="flipbook">
        <div class="hard">
            Turn.js
        </div>
        <div class="hard" />
        <div> Page 1 </div>
        <div> Page 2 </div>
        <div> Page 3 </div>
        <div> Page 4 </div>
        <div class="hard" />
        <div class="hard" />
    </div>
</template>

<script>
import $ from 'jquery'

export default {
    mounted() {
        // mounted生命周期仅在客户端触发，无需额外判断也可执行
        if (process.client) {
            // 将jQuery挂载到window，供turn.js识别绑定
            window.$ = $
            // 动态引入turn.js
            require('turn.js')
            // 先初始化turn，再调用相关方法
            $('#flipbook').turn({
                width: 400,
                height: 300,
                autoCenter: true,
            })
            console.log($('#flipbook').turn('page'))
        }
    }
}
</script>

全局引入方案（可选） #

如果需要多组件使用turn.js，可以通过Nuxt客户端插件统一引入：

1. 新建plugins/turn.client.js文件：

import $ from 'jquery'
window.$ = $
import 'turn.js'

2. 在nuxt.config.js中注册插件（Nuxt3会自动识别.client.js后缀仅客户端加载，Nuxt2需要额外配置mode: 'client'）：

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

3. 组件内直接调用即可，无需重复引入依赖。

内容的提问来源于stack exchange，提问作者Stone0409