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

Question

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

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

---

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

---

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

---

可能相关的链接

• Vue pdf在构建后无法在chrome中工作
• 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 的蓝图被配置为在文件夹中查找模板（包括 Vue 应用程序的index.html文件）./dist/，并在文件夹中查找静态文件./dist/static/，这允许 Vue 应用程序工作，但是 Flask 配置中没有任何内容告诉它如何处理对worker.js文件的请求（worker-loader创建这些worker.js文件并且是 的依赖项vue-pdf）。