[FIXED] vue-pdf not working in built Vue / Flask app

Issue

vue-pdf works (I see the rendered PDF) when I'm running the Vue app in hot-reload mode, but when I build the project, it doesn't work (the PDF doesn't show up), and I see an error in the console:

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

---

How the webpage looks when running the Vue app in hot-reload mode:

---

How it looks when using the built code (including the error message):

---

Possibly-related links

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

Solution

I solved this by adding a custom Flask route that handled requests for files ending in worker.js and looked in the correct folder for that file:

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')

---

This problem was happening because the blueprint in my Flask app handling the Vue app's HTML/JS was configured to look for templates (including the Vue app's index.html file) in the ./dist/ folder, and the static files in ./dist/static/ folder, and this was allowing the Vue app to work, but there was nothing in the Flask configuration telling it how to handle a request for the worker.js file (worker-loader creates those worker.js files and is a dependency of vue-pdf).

Answered By - Nathan Wailes