Vite assets 404 from a wrong base path after build in CI

By Kaveh Alemi·Latchkey

Vite writes absolute asset URLs based on the base option (default /). When the deploy target is a subpath such as a project Pages site, the built index.html requests /assets/... instead of /repo/assets/..., and every asset 404s.

What this error means

The build passes but the deployed page is blank with 404s for /assets/index-*.js and /assets/index-*.css in the network tab. It works at the domain root but not under a subpath.

vite

GET https://user.github.io/assets/index-a1b2c3.js 404 (Not Found)
GET https://user.github.io/assets/index-d4e5f6.css 404 (Not Found)

Common causes

base does not match the served subpath

The site is served from /repo/ but base is left at /, so hashed asset URLs resolve to the domain root and 404.

The base is hardcoded for one environment

A fixed base works for production but breaks preview deploys served from a different prefix.

How to fix it

Set base to the deploy subpath

Match base to the path the site is served from, with leading and trailing slashes.

vite.config.js

export default {
  base: '/my-repo/'
}

Drive base from an env var in CI

Build with the correct base per environment instead of hardcoding it.

.github/workflows/deploy.yml

- run: npx vite build --base=/${{ github.event.repository.name }}/

How to prevent it

Set base to match every deploy target, including subpaths.
Use relative or env-driven base for preview and production parity.
Verify asset URLs in the built index.html before deploying.

Frequently asked questions

What causes "assets 404 from wrong base"?

The site is served from /repo/ but base is left at /, so hashed asset URLs resolve to the domain root and 404.

How do I fix assets 404 from wrong base?

Match base to the path the site is served from, with leading and trailing slashes.