Static site generation with Nuxt.JS using relative paths

Question

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

change router base nuxtjs.org/docs/configuration-glossary/configuration-router/… — Lawrence Cherone
– Lawrence Cherone, Commented May 13, 2022 at 23:04
I think router base is not an option as setting router.base as /app/ generates <script src="/app/_nuxt/fe2321b.js" defer> on all the levels. The paths are not relative. — Jani Bolkvadze
– Jani Bolkvadze, Commented May 13, 2022 at 23:14
Have you had a chance to resolve your problem? For me it's so important that I start to think to get rid of both Nuxt and Nuxt Content since both things doing plenty of things I just don't need (as ssr) still failing such a simple thing as configuring relative path for files. — Arsenii Fomin
– Arsenii Fomin, Commented Oct 9, 2023 at 4:45
@ArseniiFomin you'll be plenty lucky if OP answers back here. Mainly because the post is also 1yo+ old. Post it on some community (Nuxt's discord) or create a new question with the latest Nuxt3 version (and Vite). — kissu
– kissu, Commented Oct 9, 2023 at 6:16
@kissu Thank you for the suggestion. I've decided that I'm fed up with Nuxt, currently trying to migrate my project to pure Vite. — Arsenii Fomin
– Arsenii Fomin, Commented Oct 9, 2023 at 10:36

Esset · Accepted Answer · 2022-10-23 05:17:47Z

1

Try this out:

export default defineNuxtConfig({
  app: {
    baseURL: '/mydir',
    buildAssetsDir: '/mydir/_nuxt/',
  },

edited Oct 23, 2022 at 5:17

Esset

1,0562 gold badges16 silver badges18 bronze badges

answered Oct 19, 2022 at 11:31

Akseli

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

cascading-jox · Accepted Answer · 2022-05-21 05:53:02Z

0

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.

answered May 21, 2022 at 5:53

cascading-jox

1,1511 gold badge11 silver badges26 bronze badges

1 Comment

Arsenii Fomin Over a year ago

I don't understand why, but Vite just ignores "base" config (Nuxt 3 with Vite enabled by default): "vite: { base: '/my_real_app_location'' // or just './' as said in their docs }," is ignored and all paths in index.html are still "/_nuxt/" ones..

Marcel · Accepted Answer · 2022-08-15 15:36:21Z

-4

Or just edit index.html manually...

answered Aug 15, 2022 at 15:36

Marcel

1

1 Comment

kissu Over a year ago

Not sure that doing this kind of operation on each build is a reliable and lont-term solution.

Collectives™ on Stack Overflow

Static site generation with Nuxt.JS using relative paths

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related