vue.jsnuxt.jsnuxt-link

nuxt-link makes different urls in development and generate/production mode

I have created a nuxt project and in development mode It works fine, but when I run npm run generate or host it on a server, links generated by nuxt-link haven't correct href value. For example this is the address that generated in development mode:

<nuxt-link :to="{name: 'lang-music', params: {lang: key, music: song.name}}"></nuxt-link>

http://localhost:3000/yiddish/Die%20goldene%20Pave

But on gitlab pages it generate:

https://username.gitlab.io/yiddish/Die%20goldene%20Pave

While it should be:

https://username.gitlab.io/learnlyric/yiddish/Die%20goldene%20Pave

My pages folder structure: enter image description here

Solution

  • The thing is Nuxt doesn't know your base url, you just need to add it to the nuxt.config.js file.

    // nuxt.config.js

export default {
  router: {
    base: process.env.DEPLOY_ENV === 'GH_PAGES' ? '/learnlyric' : '';
  }
}

    See the Nuxt documentation for more details.