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.

\
```js
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)`

\
```js
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](https://medium.com/@dhgouveia/how-to-serve-a-vite-vue3-page-inside-a-sub-folder-d2611a99b45b)

## **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>

\


Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

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

Too Long; Didn't Read

@dhgouveia

RELATED STORIES