In my vuejs app I have an iframe which should show another app. However I always get an
DOCUMENT NOT FOUND
In my component i wrote
<iframe src="/static/stbnotes/stbnotes.html"></iframe>
For my router I defined a base option
base: 'pat-os/'
This works fine in development - content will be loaded in the iframe. But not when creating a build using npm run build and load it from a server. The url for the iframe is now
http://localhost/static/stbnotes/stbnotes.html
where I want it to be
http://localhost/pat-os/static/stbnotes/stbnotes.html
How can I set a working relative path to the static folder (could be another folder as well) for the iframe?
Related
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).
I need to open an static HTML file inside an iframe because I need it to be printed silently, I’m trying setting the iframe src with absolete and relative paths but none of them work, I’ve tried moving my files inside public, static and assets folders with no success, I’ve seen that some people uses process.env.BASE_URL to access absole path of environment but it doesn’t work in Quasar.
Currently I have my files in a folder called ticketTemplates inside public folder placed at root, and it has two files: first.html and first.css, I’m doing the following:
<iframe src="ticketTemplates/first.html" frameborder="1"></iframe>
But as I said before it does not with relative or absolute paths. I've tried with http://localhost:8080/ticketTemplates/first.html too and it does not work.
Could you tell me how to achieve it?
I opened this tread in Quasar Forum and I found I was using an outdated version of #quasar/app, I updated my project and the content worked inside my iframe.
I moved my ticketTemplates folder inside public folder located in root directory, next to quasar.conf.js file and the resulting code was:
<iframe src="http://localhost:8080/ticketTemplates/first.html" frameborder="1"></iframe>
All the credit goes to the user who helped me.
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.
Apologies if this explanation isn't super clear. I am new to VueJS and I will do my best to explain my predicament.
I am building an application that imports html from external files into a component using v-html. I achieved that without any problems. However, the html has a bunch of asset urls that start with a /. What I want to do is to ensure that every asset url that starts with a / has a baseURL placed in front of it, converting it from say '/some-folder/some-asset.jpg' to '../../static/some-folder/some-asset.jpg' automatically without me having to programmatically modify the url.
I have tried modifying settings in the configuration file index.js, namely by trying different urls in assetsSubDirectory and assetsPublicPath but without success.
This is an example of a node in the imported html:
<picture>
<source media="(min-width: 768px)"srcset="/media/3974/cover_tablet.jpg">
<img id="img_20921" src="/media/3973/cover-mobile.jpg" class="img-fluid">
</picture>
I am trying to change the src value of:
/media/3974/cover_tablet.jpg
to:
../../static/media/3974/cover_tablet.jpg
by setting a base URL in the vue configuration but it won't prepend ../../static to the url and therefore the app cannot find the relevant asset.
The only way I managed to get this to work is by using JQuery to look for "src:" strings in the imported html and then prepend the baseURL into the link. This isn't at all ideal though and what I really want to achieve is for any link that starts with a "/" to have the apps baseURL prepended to it automatically.
I am starting to wonder if it is even possible for urls in imported html to pick up the apps baseURL value?
I found a solution. I was using the webpack template for my project which proved to make this particular issue difficult to work out so I reset my project using the Vue CLI template instead, put all my assets in the public folder and all the links in my imported html were picked up immediately with no fuss and no messing around with webpack configuration.
I don't know how this vuejs project render data to the web browser. Can anyone help me to explain this?
Link url: https://github.com/huytrongnguyen/vue-cms
Notice: you have to clone this project to your computer.
Vue loader in the webpack config will change all of the components into Javascript. That JS is loaded when the index.html in the dist folder is opened in a browser. After the javascript is parsed, it'll run and populate the DOM with HTML strings created by the webpack process