I have a project here, I did akella tutor: https://github.com/merrymaker14/vuegl https://merrymaker14.imtqy.com/vuegl

But he does not go through the pages normally, although he seems to have set everything up. Why?

nuxt.config.js:

import pkg from './package' /* nuxt.config.js */ // only add `router.base = '/<repository-name>/'` if `DEPLOY_ENV` is `GH_PAGES` const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? { router: { base: '/vuegl/' } } : {} export default { mode: 'universal', /* ** Headers of the page */ head: { title: pkg.name, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: pkg.description } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, ...routerBase, router: { middleware: 'pages', //base: '/examples/vuegl/' }, /* ** Global CSS */ css: [ ], /* ** Plugins to load before mounting the App */ plugins: [ ], /* ** Nuxt.js modules */ modules: [ ], /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend(config, ctx) { } } }

    1 answer 1

     <template> <div class="navigation"> <nuxt-link to="/">Homepage</nuxt-link> <nuxt-link to="/about">About</nuxt-link> <nuxt-link to="/another">another</nuxt-link> </div> </template>

    Your links are relative.

    You need to explicitly specify the links, and then the relative links to GHPages do not work.

     <template> <div class="navigation"> <nuxt-link to="https://merrymaker14.imtqy.com/vuegl/">Homepage</nuxt-link> <nuxt-link to="https://merrymaker14.imtqy.com/vuegl/about">About</nuxt-link> <nuxt-link to="https://merrymaker14.imtqy.com/vuegl/another">another</nuxt-link> </div> </template>