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 and to make this happen, you need two changes. https://example.com/my-page/ The first change is on or , and add the parameter , when using . This will work with any sub-folder, since the assets URLs will start with and use the relative path. vite.config.ts .js base: '' '' index.html ./ export default defineConfig({ ..., base: '', // or the path instead if you want '/my-page/' }); The second change is inside your Vue router, in my case and add the parameter base in src/router/index.ts createWebHistory(base?: string) const router = createRouter({ history: createWebHistory('/my-page/'), routes: [...], ... }); You could experiment with to make it agnostic of the folder name, but with my testing, it failed after navigating to another route. location.pathname Alternatively, you could modify your instead of the router and just add the base tag like this index.html <base href="https://example.com/my-page/"> Note that if you go 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 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. https://example.com/my-page/my-route https://example.com/ 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
