vue-pdf 在内置的 Vue / Flask 应用程序中不起作用

Question

vue-pdf 在我以热重载模式运行 Vue 应用程序时有效（我看到了渲染的 PDF），但是当我构建项目时，它不起作用（PDF 不显示），我在控制台中看到一个错误：

GET http://client.resolutewl.com/bfa0c7848d81ecc3380c.worker.js 404 (NOT FOUND)

---

在热重载模式下运行 Vue 应用程序时网页的外观：

---

使用构建代码时的外观（包括错误消息）：

---

可能相关的链接

• Vue pdf not working in chrome after build
• Absolute path for worker.js

Answer 1

我通过添加一个自定义 Flask 路由来解决这个问题，该路由处理对以 worker.js 结尾的文件的请求，并查看了该文件的正确文件夹：

from flask import send_from_directory

@<YOUR-BLUEPRINT>.route('/<worker_file_name>.worker.js')
def worker_file(worker_file_name):
    return send_from_directory(os.path.join(<PATH-TO-YOUR-TOP-LEVEL-DIRECTORY>, 'dist'),
                               '{}.worker.js'.format(worker_file_name),
                               mimetype='text/javascript')

---

之所以出现此问题，是因为我的 Flask 应用程序中处理 Vue 应用程序的 HTML/JS 的蓝图被配置为在 ./dist/ 文件夹中查找模板（包括 Vue 应用程序的 index.html 文件），以及 @ 中的静态文件987654327@ 文件夹，这允许 Vue 应用程序工作，但 Flask 配置中没有任何内容告诉它如何处理对 worker.js 文件的请求（worker-loader 创建那些 worker.js 文件并且是vue-pdf)。