Error to deploy my Vue3 app to Github Pages

user_3152808 0
Viewed 89

I have uploaded my project with Vue3 to Github pages (check my repository), the branch is assigned to gh-pages and I have also uploaded the /dist folder, generated with the: npm run build command.

I also modified the vue.config.js file with this data from my repository:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === "production" ? "/pokevue/" : "/"
})

I have two questions:

The first is why isn't Vue working/loading in my web, if I followed the instructions in this guide correctly.

The second one is why this route does not show the "home" (it is broken, of course): https://amoralesdesign.github.io/pokevue/

But when you click on the Pokémon logo it does redirect to my real Home, although if you reload the page it gives a 404.

vuejs2 vuejs3 vue.js github-pages github
1 Answers

You need to config your base router points to your github page path:

const router = createRouter({
    history: createWebHistory(process.env.NODE_ENV === 'production' ? '/pokevue/' : '/'),
    routes
})

The reason when you click on the logo your home page is showing is that in that case, the vue router will match your URL with the home page route.

user_42546810
Related