― I’M SHISHIR RAVEN

WEBSITE & App Builder

Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry’s standard dummy text.

Hosting VueJS Project on Github Pages

Hosting a VueJS project is pretty straight forward but I faced problem with VueJS Routing. First of all it did not work out of the box. I had to change the base path in the config file.

I added the base URL to the vite config file.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  base: "/bravevue/",
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
  server: {
    open: true,
  },
});

I added the base also to the router file.

const router = createRouter({
  history: createWebHistory("/bravevue/"),
  routes,
  linkActiveClass: "dark:bg-slate-800 ",
});

Well even after this the code did not worked fine if we refresh the page. So I had to make a copy of index.html to 404.html. This is a work around through it sends a 404 error to the browser anyways.

I wish there could be a more elegant solution to this but for now it works.

That’s it.

I am building a open source component library called bravevue if you are looking for a customized headless UI library you are free to use this.

Homepage : https://shishirraven.github.io/bravevue/


Posted

in

,

by

Tags: