0

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

Bruno Martins
  • 882
  • 2
  • 10
  • 21
Heyran.rs
  • 501
  • 1
  • 10
  • 20

1 Answers1

1

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.

Bruno Martins
  • 882
  • 2
  • 10
  • 21
  • Thank you. I don't know why your code not working but `base: '/learnlyric'` solved the problem. – Heyran.rs Sep 07 '20 at 08:16
  • 1
    It uses the `DEPLOY_ENV` variable that you can set while executing a command. For example `generate:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt generate` (doesn't work on Windows, see [cross-env](https://www.npmjs.com/package/cross-env) for this). If you only have one deployment environment, you can use `process.env.NODE_ENV === 'production'` instead! If the answer suits you, could you flag it with the green check, thanks – Bruno Martins Sep 07 '20 at 08:24