Nuxt•2w ago

Nuxt Generate with BaseUrl

When I run nuxt generate and then start it with NUXT_APP_BASE_URL=/dash/ npx serve .output/public all the requests still go to http://127.0.0.1:3000/... instead of http://127.0.0.1:3000/dash/.... I have the same issue when using static images, when i use the following code:

<div
  class="float-right h-[150px] w-[150px] md:col-span-4 md:float-none md:h-[300px] md:w-[300px]"
>
  <NuxtImg
    src="/img/profile.jpg"
    alt="Profile picture"
    class="h-full w-full rounded-lg object-cover shadow-lg"
  />
</div>

<div
  class="float-right h-[150px] w-[150px] md:col-span-4 md:float-none md:h-[300px] md:w-[300px]"
>
  <NuxtImg
    src="/img/profile.jpg"
    alt="Profile picture"
    class="h-full w-full rounded-lg object-cover shadow-lg"
  />
</div>

it doesn't work with the baseurl. it seems that the baseurl doesn't get applied while static starting and when I try to generate it with the baseurl variable set i get errors about images not found. (see attachment)

nuxt_generate.log

2 Replies

kapa.ai•2w ago

Hi @Koen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it appears that there have been some issues with the baseURL functionality in Nuxt, particularly when using nuxt generate. Let me address your concerns: 1. Regarding the nuxt generate and serve issue: The behavior you're experiencing where requests still go to <http://127.0.0.1:3000/...> instead of <http://127.0.0.1:3000/dash/...> might be related to a known issue. According to a GitHub issue, there have been problems with prerendering not respecting the baseURL. 2. For the static images issue: The problem you're facing with static images not working with the baseURL is also likely related to this same issue. The baseURL is not being applied correctly to static assets in some cases. 3. Errors about images not found during generation: This issue has been reported and addressed in a recent fix. According to a GitHub pull request, there was a problem with respecting the baseURL when ignoring prerendered manifest. This fix adds the baseURL to the manifest preload path. To potentially resolve these issues, you can try the following: 1. Ensure you're using the latest version of Nuxt, as some of these issues have been addressed in recent updates. 2. In your nuxt.config.ts, explicitly set the baseURL:

   export default defineNuxtConfig({
     app: {
       baseURL: '/dash/'
     }
   })

   export default defineNuxtConfig({
     app: {
       baseURL: '/dash/'
     }
   })

3. If you're still experiencing issues, you might need to manually adjust asset paths or use a workaround. One user suggested manually rewriting the worker, but this is not an ideal solution GitHub issue comment. 4. For the static images, try using the useRuntimeConfig() composable to access the baseURL and prepend it to your image paths:

   <script setup>
   const config = useRuntimeConfig()
   </script>

   <template>
     <NuxtImg
       :src="`${config.app.baseURL}img/profile.jpg`"
       alt="Profile picture"
       class="h-full w-full rounded-lg object-cover shadow-lg"
     />
   </template>

   <script setup>
   const config = useRuntimeConfig()
   </script>

   <template>
     <NuxtImg
       :src="`${config.app.baseURL}img/profile.jpg`"
       alt="Profile picture"
       class="h-full w-full rounded-lg object-cover shadow-lg"
     />
   </template>

If these solutions don't work, it might be worth opening a new issue on the Nuxt GitHub repository with a minimal reproduction of your specific case, as the developers are actively working on resolving baseURL-related issues. Nuxt Configuration Reference provides more information about configuring the baseURL in Nuxt. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@457205992233369621> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt Generate with BaseUrl

Did you find this page helpful?