How To Serve a Vite + Vue3 Page Inside a Sub-folder

Today I've spent a lot of time trying to figure out how to serve a Vue3 + Vite page inside a sub-folder. So I decided to make a quick post to help others in the same situation.

The URL was https://example.com/my-page/ and to make this happen, you need two changes.

The first change is on vite.config.ts or .js, and add the parameter base: '', when using '' . This 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/'
});

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: [...],
  ...
});

You could experiment with location.pathname to make it agnostic of the folder name, but with my testing, it failed 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="https://example.com/my-page/">

Note that if you go another route, ex: https://example.com/my-page/my-route and refresh the page, it might show you the root page of https://example.com/. This is something you will need to fix via your web server config such as nginx, and doing so might not require all the changes mentioned above. I recommend this setup for showing a work-in-progress project, or one-page landing, etc.

I hope this was helpful.

Also Published Here

References:

• https://v3.vitejs.dev/config/shared-options.html#base
• https://router.vuejs.org/api/#createwebhistory
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base