DEV Community

Jose De Gouveia
Jose De Gouveia

Posted on


How to serve a Vite + Vue3 page inside a sub-folder

Today I've spent a quite long amount of time trying to figure out how to just serve a Vue3 + Vite page inside a sub-folder, so i decided to make a very quick post to help any people in the same situation. 

So the URL was like, and to make this happens, you need two changes

The first one is on vite.config.ts or .js, and add the parameter base: '', when using '' will work with any sub-folder, since the index.html assets URLs will start with ./ and use the relative path

export default defineConfig({
  base: '', // or the path instead if you want '/my-page/'
Enter fullscreen mode Exit fullscreen mode

The second change, is inside your vue router , in my case src/router/index.ts and add the parameter base in createWebHistory(base?: string)

const router = createRouter({
  history: createWebHistory('/my-page/'),
  routes: [...],
Enter fullscreen mode Exit fullscreen mode

You could experiment with location.pathname to make it agnostic of the folder name, but on my testing, it fail after navigating to another route

Alternatively, you could modify your index.html instead of the router and just add the base tag like this <base href="">

Note that if you go to another route, ex: and refresh the page, it might show you the root page of, this is something you will need to fix via your web server config such nginx, and doing that you might not need to do all these changes mentioned above, i recommend this setup just for showing a work in progress project, or one page landing, etc

I hope this was helpful.


Top comments (0)

5 Websites To Learn Frontend Web Development Faster

In this article, Bentil Shadrack has curated 5 resourceful sites that will help you better you web development skills really fast.