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
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).
Related
I recently started learning NuxtJs and create a nuxt app using the nuxt3 template. The code i used to generate the starter project is
npx nuxi init nuxt-app
However the the terminal shows that the app has been created and the dev server also starts displaying the Nuxt3 welcome page. But when i load the directory in vs code the folders like pages,store and components are not visible as seen in the screenshot below .
You are importing <NuxtWelcome /> component from node_modules folder. Delete it and replace with <NuxtPages/>. Create your own components in folder pages. Nuxt 3 imports components by itself, so you don't see them in <script> tag. <NuxtPages /> will do the magic with components in page folder. For example, Index.vue component you will see in / home page and About.vue in /about.
This behavior is a year old already: Some of the directories are missing when I'm trying to create a new Nuxt js project
The idea is to have something minimal where you could then add all the needed directories.
Benefit being that if you don't use any pages, the final bundle will be smaller (no need to being in Vue router for example). Same for the store (no need to import Vuex/Pinia), server part etc...
It's less of a "you have everything from the start" and more of a "pick what you like the most"!
What I'm trying to do is make my vue ssa app load all its static files from a cdn instead from a server hosting it. I build the app using the command npm run build and modify the file index.html like this, I changed
src="/js/chunk-vendors.0704b531.js" to src="https://cdn.example.com/js/chunk-vendors.0704b531.js"
href="/css/app.c7158abb.css" to href="https://cdn.example.com/css/app.c7158abb.css"
(Could not change
src="/js/app.ee558821.js" to src="https://cdn.example.com/js/app.ee558821.js"
without causing an error. I'll explain later)
and I upload all the files in the dist folder including the index.html to a shared hosting server. I'm using bunny cdn and configured it to work with my domain. All works fine. However when I tried to include the file app.ee558821.js on the cdn (Issue I said I'll explain later)
src="/js/app.ee558821.js" to src="https://cdn.example.com/js/app.ee558821.js"
I got these error messages on the browser console
ChunkLoadError: Loading chunk 245 failed.
(missing: https://example.com/https://cdn.example.com/js/245.e400d699.js)
What I can see in the browser console is that all the files viz 'chunk-vendors.0704b531.js', 'app.c7158abb.css' and 'app.ee558821.js' successfully load from the cdn but the all the other files 'app.ee558821.js' somehow called where getting the path wrong. Instead of the normal path like https://cdn.example.com, the path instead look like this https://example.com/https://cdn.example.com.
Now my question is how do I make my vue app loads all its static assets from a cdn?
This is the content of my vue.config.js file
const { defineConfig } = require('#vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
});
These are the contents of my dist folder
css
some files here
js
|114.b704aee6.js
|245.e400d699.js
|439.027f133c.js
|623.76b80e83.js
|724.ebcd23c0.js
|app.ee558821.js
|chunk-vendors.0704b531.js
favicon.ico
index.html
Thank you very much any help is greatly greatly appreciated. I recently taught myself how to code and this is my first question on stackoverflow.
Thank you Michal Levý for pointing me in the right direction. I changed the publicPath property to 'https://cdn.example.com/' and that fixed the problem.
I am new to nuxt js. I have a template of nuxt js which I am working on. In router.js I added some new routes, that's working fine, but when I run my development server again npm run dev, the updated code is just removed. I see the old code there. And it only does for the .nuxt folder. Not for the vue components.
Can anyone suggest something? Thanks.
Nuxt uses a method called File system routing, with that routes.js file is automatically generated according to your configuration and pages created, that is why your changes get removed
If you have a specific requirement that need more customization you can extend the router config
The Nuxt documentation (latest) states that for SPA you need to set ssr: false in nuxt.config.js. Also, every vue file in the pages folder is added to the router configuration, so you don't have to do this yourself. This is both correct and works perfectly, but there is something I really don't understand.
When I run npm run build (nuxt-ts build), it builds the production output of the project and puts in the dist folder (default). I was surprised to see that even though I configured it to be a SPA, it still generates HTML files for each vue file in the pages folder.
It happens with newly generated projects using npx nuxt-create-app as well.
What I'd expect is that it only generates one HTML file (which is index) when ssr is set to false and when I want a static app, I would use npm run generate or set target to 'static' to create HTML files per route.
Nuxt documentation also states this for the target property:
https://nuxtjs.org/docs/2.x/get-started/commands#target-server-default-value (builds output to dist)
https://nuxtjs.org/docs/2.x/get-started/commands#target-static (generates HTML per route)
All I have in my config is ssr set to false, so it should not generate static files (HTML) per page.
What am I missing here, or am I misunderstanding how this works?
Thanks in advance!
Remember that in a static setup, your visitors may arrive at your site via any of your page routes— not just index.html.
For example, they may access https://www.your-app.com/contact-us. If you do not have a contact-us.html file available, and you don’t have a server configured to handle this request (as is the case with universal mode), you’re gonna end up with a 404.
What happens in static mode is contact-us.html is served, which contains the minimum javascript necessary to hydrate your nuxt app, then SPA mode kicks in— giving you client-side navigation.
I would like to deploy my app to a virtual directory. I have been unable to figure out the correct configuration needed to run the app locally with a similar structure. For example, I'd like to run it from:
http://localhost:8080/demos
I have tried every combination of adding "demos" to publicPath and contentBase in my webpack config. The errors just between 404's on static assets and router errors from Aurelia.
It is documented by Aurelia router, you can add base tag to index.html header, <base href="/demos">, and set router root config.options.root = "/demos"; in configureRouter().
In addition, if your bundled js files are indeed served from directory, you need to modified baseDir in 2 places of aurelia.json: platform.baseDir and build.targets[0].baseDir.