I have a Nuxt.js project and I generate a static app. I need to put it in a subdirectory on ftp, but I can't make it work.
I've set router.base to /subfolder and that works fine for _nuxt, but static files are still using absolute path /img/...
So I've tried to put my static files into assets/img/, but they are not getting loaded from scss when I use ~assets/img/...
I've read many topics, but couldn't find the solution.
Any ideas?
Thank you
I had trouble finding solutions in the documentation as well, but I found out you can use the static folder on a subdomain if the links are changed from:
/image.jpg
to:
~/static/image.jpg
Also if it helps, I believe changing:
~assets/image.jpg
to
~/assets/image.jpg
Might solve your issue?
Related
I'm using Nuxt 2.15.8 to generate static pages (migrating to Nuxt 3 is also an option for me if it solves the problem).
It works great when deployed in the root folder of the server but I need it to be served in a subdirectory, like:
https://my.domain.com/folder/subfolder
The problem is that the compiled HTML includes nuxt related assets like:
/_nuxt/123456789.js
which translates to:
https://my.domain.com/_nuxt/123456789.js which obviously fails as the file is in a subfolder, not in the root.
I tried using publicPath config and absolute paths but it is not an option for me as I have several environments with different URLs.
I need to generate static HTML files with relative paths in order to make sure my site works as expected in all the environments, agnostically from the server URL.
I was able to achieve it using Vite + Vue 3 but migrating to a new implementation is not an option, I need to achieve it using the current Nuxt implementation.
I tried using nuxt-vite https://vite.nuxtjs.org/ but was not able to achieve relative paths, I still get
/_nuxt/123456789.js
instead of
./_nuxt/123456789.js
../_nuxt/123456789.js
../../_nuxt/123456789.js
, etc
It seems like it's not supported in plain nuxt 2 but if you use nuxt-vite you can set vite.base to '' or './' in nuxt.config to make the paths relative.
Try this out:
export default defineNuxtConfig({
app: {
baseURL: '/mydir',
buildAssetsDir: '/mydir/_nuxt/',
},
Or just edit index.html manually...
Im trying to upload static files(images and js) from "static" folder. And it works fine for index file and base route localhost:8000/, but if I go to the next route localhost:8000/reviews/master001 then static files disappears and I receive by route localhost:8000/reviews/js. And there is two things, first is how to remove prefix "reviews"?
I tried to use in nuxt.config.js
static: {
prefix: false
}
by documentation, but it does not work. Tried to use paths in nuxt.config like "../js", "#/static/js", "/js" - this one works for index file.
Also there are no any static files after I go through the router-link such it in nuxt documentation for path localhost:8000/reviews/master001.
Here there are.
And here there no any files.
As explained in the comments above, images should be in assets and static is only aimed for specific use cases, like exposing a publicly accessible .pdf file.
If you want to install and use jQuery properly into your Nuxt project, you can follow my answer here: https://stackoverflow.com/a/68414170/8816585
If you want to load a specific script and cannot do it in a more cleaner way (with NPM), you can also follow the instructions there: https://stackoverflow.com/a/67535277/8816585
Use this as a last resort tho and be aware that it will increase bundle size and loading time.
I've read multiple articles and posts about the nuxt generate issues, but i couldn't find an answer. So I'm learning Vue & Nuxt. I've create a spa, and i'm trying to host it on my website (in a subfolder eg. http://mywebsite.com/subfolder/). It's a simple hosting website (shared server) so i'd like to generate a static website from my files.
I'm running nuxt generate , but when i move the dist folder generated in my subfolder, i'm getting erros :
GET http://mywebsite.com/_nuxt/5f51d97c56209053356b.js net::ERR_ABORTED 404 (Not Found)
Of course, the path should be
http://mywebsite.com/subfolder/_nuxt/5f51d97c56209053356b.js
How can i fix this? From what i've understand, i should add some lines in my nuxt.config.js file right? I've tried multiple combinations, but i can't make it work..
Allright so this was simple, i've finally found the answer in the docs. I've simply added in my nuxt.config.js file the following :
router: {
base: '/subfolder/'
}
Is there any way of generating a Google : ads.txt file every time i build my SSR project?
There is a module called: sitemap-module from nuxt-community, it is used to generate a sitemap xml file, and that file can be accessed by http://domain.tls/sitemap.xml. and i want something like that.
So currently i'am achieving this by building the project, then manually put ads.txt it in : /var/www/site/.nuxt/dist/client/,
The problem with this is that everytime i rebuild the project i loose /var/www/site/.nuxt/dist/client/ folder then i have to add ads.txt file again.
I would like to know how i can hook up my code to tell nuxt to generate ads.txt file and put it in /var/www/site/.nuxt/dist/client/
Not sure if it makes sense, but i hope someone will understand.
Place your ads.txt file in a directory named static as mentioned here. All the contents of the static directory can be accessed via example.com/{filename.extension}
If you are not using nuxt.js and just using vue js, place it in a public directory right next to src directory.
Haven't found any way of solving this in nuxt, so i decided to redirect all https://domain.tld/ads.txt in Nginx configuration.
/etc/nginx/sites-available/default.conf
#redirect all txt request
location ~* ^.+.(txt)$ {
root /var/www/other.files/;
}
So i think i'll stick to it.
I am not sure why my public assets are not being discovered by play. i am using the same code that works in an activator template in a play2 intelliJ project.
the routes
# Map static resources from the /public folder to the /assets URL path
GET /assets/*file controllers.Assets.at(path="/public", file)
and the html
<img src="#routes.Assets.at(s"images/foo.png")" width="64px">
seem to be correct, and the foo.png is in the public/images folder. the inspector highlights images/foo.png in the html with "cannot find" message. they seem to be being compiled, as they also correctly are placed in the target directory. the rest of the app and html is working fine
what is a possible explanation for this?
Try:
#routes.Assets.versioned("images/foo.png")
Honestly, I have no idea why but I know that it works for me.
Interestingly, there was nothing wrong. it seems that between sbt, play, and IntelliJ, there was simply lag in the resource resolution. after about an hour, everything suddenly worked.
this may not be reproducible, and therefore this question might be a candidate for removal