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

【问题标题】：Unable to read vue file on reload重新加载时无法读取 vue 文件
【发布时间】：2018-08-21 14:54:00
【问题描述】：

我正在使用 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/,
  },

编辑：

重现步骤：

克隆repo。
npm install --save vue-pdf
将其包含在任何组件中。
直接导航到路由会报错。

【问题讨论】：

标签： webpack vue.js babeljs

【解决方案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: use a custom libary (pdf.js) in a component）

希望它有所帮助，或者至少你有一个参考点。

【讨论】：