无法在重新加载时读取vue文件

Question

我正在使用vue-pdf和vue-server-renderer.在内部浏览页面时,它工作正常,但在重新加载时,webpack无法在vue-pdf模块中读取.vue文件.

vue-pdf/src/vuePdfNoSss.vue:1
(function (exports, require, module, __filename, __dirname) { <style src="./annotationLayer.css"></style>
                                                              ^

SyntaxError: Unexpected token <
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Function._load (/Users/aditya/rentomojo/node_module

Webpack配置

rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
  },

编辑:

重现步骤:

1. 克隆回购.
2. npm install --save vue-pdf
3. 将其包含在任何组件中.
4. 直接导航到路线,它会抛出错误.

Answer 1

你的问题是vue-pdf 没有被 vue-loader 处理

根据该库的官方文档，这种行为存在一个未解决的错误：

组件不被 Webpack #13 处理

与你的确切错误。您可以查看：https ://github.com/FranckFreiburger/vue-pdf/issues/13

你要么帮忙解决问题，要么等到问题解决。

同时你可以尝试：

• 更新到 v2版本的 vue-pdf （看起来工作正常）

• 检查您是否仅使用数字渲染pdf（根据文档，仅使用数字它会破坏）。

选择

由于您有 webpack，因此最好将 pdfjs-dist 安装到节点模块中（请参阅 pdfjs-dist），然后将其从现有位置删除。

npm install pdfjs-dist

如果你这样做，导入会更加“标准”，

import { PDFJS } from 'pdfjs-dist'

并尝试一下是否可以正常工作。

（摘自此处：Vue：在组件中使用自定义库（pdf.js））

希望对你有帮助，或者至少给你一个参考。