|
19 | 19 | - Keep environment-specific values in `.env` or the project's existing config pattern instead of hardcoding them into UI files. |
20 | 20 | - Check route base paths, asset paths, and build output behavior before deployment. |
21 | 21 |
|
| 22 | +### Vite base configuration for subdirectory deployment |
| 23 | + |
| 24 | +When deploying to a subdirectory (e.g., `https://example.com/vite-test/`), the Vite `base` configuration is critical: |
| 25 | + |
| 26 | +1. **Required format**: Set `base` to an absolute path with leading and trailing slashes, matching the deployment path: |
| 27 | + ```js |
| 28 | + // vite.config.ts |
| 29 | + export default defineConfig({ |
| 30 | + base: '/vite-test/', // Correct: absolute path with leading and trailing slashes |
| 31 | + }) |
| 32 | + ``` |
| 33 | + |
| 34 | +2. **Forbidden patterns** - These will cause 404 errors when URL lacks trailing slash: |
| 35 | + ```js |
| 36 | + base: './', // WRONG: relative path breaks when URL is /vite-test (no trailing slash) |
| 37 | + base: '', // WRONG: empty base means root deployment |
| 38 | + base: 'vite-test', // WRONG: missing leading and trailing slashes |
| 39 | + ``` |
| 40 | + |
| 41 | +3. **Why this matters**: When a user accesses `https://example.com/vite-test` (without trailing slash), relative paths like `./assets/index.js` resolve to `https://example.com/assets/index.js` instead of `https://example.com/vite-test/assets/index.js`, causing 404 errors. |
| 42 | + |
| 43 | +4. **Pre-deployment checklist**: |
| 44 | + - [ ] `vite.config.ts` has `base: '/your-subdirectory/'` set correctly |
| 45 | + - [ ] Build command has been re-run after config change |
| 46 | + - [ ] Built `dist/index.html` references assets with correct paths (e.g., `/vite-test/assets/...`) |
| 47 | + |
22 | 48 | ## Routing and build defaults |
23 | 49 |
|
24 | 50 | - Use the existing router if present; do not switch routing libraries without an explicit requirement. |
|
0 commit comments