在Nuxt 2应用中引入flipbook-vue时遇到导入异常

问题根源 #

你遇到的导入异常本质是Nuxt无法正确解析flipbook-vue的vue2版本模块，大概率和依赖版本不匹配、Nuxt构建配置没适配有关。

一步步解决 #

• 锁对依赖版本
  flipbook-vue的v1.x对应Vue2，v2.x对应Vue3，Nuxt2基于Vue2开发，必须安装正确版本：

  npm install flipbook-vue@^1.6.0
  

  可以执行npm list flipbook-vue确认安装的版本是否在1.x区间。

• 调整插件注册方式
  修改plugins/flipbook.js中的代码：

  import Vue from 'vue'
  import Flipbook from 'flipbook-vue'
  
  Vue.component('Flipbook', Flipbook)
  

  然后在nuxt.config.js中注册该插件：

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

• 添加Nuxt转译配置
  如果仍出现解析错误，说明Nuxt未对第三方包做转译处理，在nuxt.config.js的build项中添加配置：

  export default {
    build: {
      transpile: ['flipbook-vue']
    }
  }
  

• 页面中使用组件
  完成以上配置后，即可在页面组件中直接使用：

  <template>
    <Flipbook :pages="['/page1.jpg', '/page2.jpg']" />
  </template>
  

验证 #

修改配置后重启Nuxt服务，即可正常导入和使用组件。若问题依旧，检查是否误装了Vue3版本的flipbook-vue，卸载后重装v1.x版本即可。

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