Atlaslog / Field Notes / Build & deployment
Field note · Build & deployment
Sub-directory deploy breaks routes, icons and API calls
Quick answer
The app is served from /gis/ but the build base, router history base and hard-coded fetch paths all assume the root, so assets, icons and API calls request the wrong prefix. Direct navigation to /gis/map returns 404 because the server has no such route.
Symptom
- GET https://example.cn/icons/poi.png 404 and GET https://example.cn/api/layers 404 while the app lives at /gis/.
- import.meta.env.BASE_URL prints '/' because base was never configured.
- location.pathname is /gis/index.html but router links point at /map.
Checklist
- Inspect the built index.html for asset URLs starting with /gis/.
- Read location.pathname to confirm the real deployment prefix.
- Search the code for fetch, image and tile paths beginning with a slash.
- Check the router history base and the Nginx location block.
Fix
Set base: '/gis/' (or process.env.DEPLOY_BASE) in vite.config, create the router with createWebHistory(import.meta.env.BASE_URL), build URLs from import.meta.env.BASE_URL, and configure Nginx with alias /var/www/gis/dist/ plus try_files fallback to /gis/index.html.
Code
GET https://example.cn/icons/poi.png 404 (Not Found)
GET https://example.cn/api/layers 404 (Not Found)
# 实际部署位置是 https://example.cn/gis/console.log(location.pathname); // /gis/index.html
console.log(import.meta.env.BASE_URL); // / ← 未配置时为根路径
Watch out
- Fixing only the build base moves the failure from asset 404s to API 404s and looks like a new bug.
- Switching to hash routing to dodge the server fallback breaks deep links and analytics that expect real paths.
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Atlaslog (2026). Sub-directory deploy breaks routes, icons and API calls. https://www.jingweizhi.com/en/cookbook/base-path-wrong.html (accessed 2026-11-03).