paint-brush
How To Serve a Vite + Vue3 Page Inside a Sub-folderby@dhgouveia
2,998 reads
2,998 reads

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

by Jose De GouveiaFebruary 7th, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Vue3 + Vite page can be served inside a sub- folder. To make this happen, you need two changes. The first one is on `vite.config.ts` or `js` and add the parameter `base: ''` The second change is inside your vue router and adding the parameter base in `createWebHistory'
featured image - How To Serve a Vite + Vue3 Page Inside a Sub-folder
Jose De Gouveia HackerNoon profile picture

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: