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/'
}
Related
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'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...
I'm getting an error on a static nuxtJS site, and it's been awhile since I worked on this.
How can I find where this is defined or referenced? Simple searching/grep doesn't help.
ERROR Error generating route "/case/ikea": This page could not be found
There is an ikea page in a different directory but I can't find any references to the path above. Have tried rm -rf dist in case it's a ghost file from an old build, but no luck.
Are dynamic paths used in some way beyond just files in the /pages/ dir?
Thanks!
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 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?