[Vue warn]: Unknown custom element: ＜viewer＞ - did you register the component correctly? For recursi

项目场景：

提示：这里简述项目相关背景：
前端页面详情 页面加载成功，但是 控制台 出现红色的 警告信息，信息内容 如下所示：

[Vue warn]: Unknown custom element: <viewer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <OutFile> at src/views/repair/outFile.vue
       <D2LayoutHeaderAside> at src/layout/header-aside/layout.vue
         <App> at src/App.vue
        

   <Root>

---

问题描述

提示：这里描述项目中遇到的问题：

如下图所示：

查看红色 警告日志的详细信息，截图如下图所示：

---

原因分析：

提示：这里填写问题的分析：

[Vue warn]: Unknown custom element: - did you register the component correctly? For
recursive components, make sure to provide the “name” option.
found in …

根据 报错日志信息，我们可以定位到 是和 组件有关，页面中如下所示，

  <viewer>
                    <img
                      v-for="(srcImg,pics) in picImageList" :key="pics" :src="srcImg"
                      style="display: inline-block;width: calc(20% - 10px);cursor: pointer;margin: 5px;"
                    />
                  </viewer> ```

---

解决方案：

提示：这里填写该问题的具体解决方案：

根据 报错日志信息，我们可以定位到 是和 组件有关，故

1、首先检查 使用页面中 是否注册了 组件
2、该组件的 注册方式是否正确
3、注意组件 使用时引入组件 和 实例化组件的顺序
4、注意 书写上 名称是否一致

原因 ：本项目中 是未安装 插件

1、安装  <viewer>  插件
npm install v-viewer --save

2、在  main.js  文件中配置
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

3、引入组件
<script>
  import viewer from ''  //引入组件
</script>

4、在使用页面中注册组件
  components: {
        viewer  //注册组件
  },

此次 因 使用的 node版本和 install viewer 有冲突，所以使用的其它组件代替该组件实现了想要的功能。

<el-image
          style="width: 100px; height: 100px"
          v-for="(srcImg, pics) in item.picImageList"
          :key="pics"
          crossorigin="anonymous"
          :src="srcImg"
          fit="contain"
          :preview-src-list="picImageList"
        ></el-image>

此次的问题解决啦~~~