vue 使用 vue-pdf 报的错
vue-pdf 是一个 预览 pdf 文件的库 ,他依赖 了 pdfjs-dist 这个库 ,pdfjs-dist 是 moliza (火狐官方) 提供 的 基础库
现在使用 vue-pdf 的时候 报错
ERROR Failed to compile with 3 errors 1:47:00
These dependencies were not found:
* pdfjs-dist/es5/build/pdf.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&
* worker-loader!pdfjs-dist/es5/build/pdf.worker.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&
* pdfjs-dist/es5/web/pdf_viewer in ./node_modules/vue-pdf/src/pdfjsWrapper.js
To install them, you can run: npm install --save pdfjs-dist/es5/build/pdf.js worker-loader!pdfjs-dist/es5/build/pdf.worker.js pdfjs-dist/es5/web/pdf_viewer
另一种报错
ERROR in ./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'pdfjs-dist/es5/build/pdf.js' in 'D:\snabp\client\web\vue\modules\node_modules\vue-pdf\src'
@ ./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&) 9:13-51
@ ./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&
@ ./node_modules/vue-pdf/src/vuePdfNoSss.vue
@ ./components/sm-file/sm-file-manage/src/component/SmFileDocumentView.jsx
@ ./components/sm-technology/sm-technology-components/src/SmTechnologyTimeLine.jsx
@ ./components/sm-d3/sm-d3-interface/SmD3Interface.jsx
@ ./components/sm-d3/sm-d3-interface/index.js
@ ./components/index.js
@ ./site/components.js
@ ./site/index.js
@ multi ./site/index.js
ERROR in ./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'pdfjs-dist/es5/build/pdf.worker.js' in 'D:\snabp\client\web\vue\modules\node_modules\vue-pdf\src'
@ ./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&) 13:20-79
@ ./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&
@ ./node_modules/vue-pdf/src/vuePdfNoSss.vue
@ ./components/sm-file/sm-file-manage/src/component/SmFileDocumentView.jsx
@ ./components/sm-technology/sm-technology-components/src/SmTechnologyTimeLine.jsx
@ ./components/sm-d3/sm-d3-interface/SmD3Interface.jsx
@ ./components/sm-d3/sm-d3-interface/index.js
@ ./components/index.js
@ ./site/components.js
@ ./site/index.js
@ multi ./site/index.js
ERROR in ./node_modules/vue-pdf/src/pdfjsWrapper.js
Module not found: Error: Can't resolve 'pdfjs-dist/es5/web/pdf_viewer' in 'D:\snabp\client\web\vue\modules\node_modules\vue-pdf\src'
@ ./node_modules/vue-pdf/src/pdfjsWrapper.js 1:0-63 227:25-39
@ ./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&
@ ./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&
@ ./node_modules/vue-pdf/src/vuePdfNoSss.vue
@ ./components/sm-file/sm-file-manage/src/component/SmFileDocumentView.jsx
@ ./components/sm-technology/sm-technology-components/src/SmTechnologyTimeLine.jsx
@ ./components/sm-d3/sm-d3-interface/SmD3Interface.jsx
@ ./components/sm-d3/sm-d3-interface/index.js
@ ./components/index.js
@ ./site/components.js
@ ./site/index.js
@ multi ./site/index.js
大概意思就是找不到 pdfjs-dist/es5/web/pdf_viewer (pdf-js-dist/es5 文件夹底下的文件)
打开 这个 node_modules\vue-pdf\src\vuePdfNoSss.vue 看一下 ,看到 确实是引用 了 ./pdfjsWrapper.js 和 pdfjs-dist/es5/build/pdf.js
然后 打开 node_modules\pdfjs-dist\ 查看 基础库 ,发现 里面并没有 es5/build/pdf.js 这个文件(压根就没有es5文件夹)
原来 是 最新 的 pdfjs-dist 这个基础库 把 es5 里面 的东西 全部 都放出来了 直接放到 pdfjs-dist 下的 根目录下了 ,导致找不到 es5文件夹了(新版删除了es5文件夹)
解决方法 就是
1 : 从 原来可以跑的node_modules 把 pdfjs-dist 拷过来一分,然后 重新 yarn serve 就能跑了
2. 将 vue-pdf 这个 依赖 降级 ,因为 vue-pdf 里面 的 package.json 依赖 了 pdfjs-dist ,所以 直接 在项目 里 yarn add pdfjs-dist 是 没有用的 (vue-pdf 自己有package.json 引用 pdfjs-dist) ,所以只有 把 vue-pdf 的版本降了 ,他才会引用 低版本 的 pdfjs-dist ,从而 存在 es5文件夹