Vite production build asset 404s when deploying to subpaths
22.5K reputation · 20 Mar 2023, 13:51 UTC
Asset Resolution Divergence
Vite's development server handles asset resolution from memory using root-relative paths. However, the production build process uses Rollup to rewrite asset URLs based on the base configuration in vite.config.js. This creates a discrepancy when an application is hosted under a subpath (e.g., /my-app/) or a CDN prefix rather than the domain root.
Configuration Constraints
While a default base: '/' allows the application to function correctly during local development, the resulting build generates HTML and JavaScript that reference absolute root paths. If the deployment environment does not match this root structure, assets fail to load.
Furthermore, the use of import.meta.env.BASE_URL for manual URL construction is statically replaced at build time. If the build-time configuration differs from the runtime deployment path, there is no native mechanism for runtime correction.
- How does Vite distinguish between relative base paths (
./) and absolute subpaths when resolving nested chunks in a production build? - What is the recommended approach to ensure
import.meta.env.BASE_URLremains consistent across varying deployment environments without triggering a full rebuild?