Atlaslog
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.

Last verified 2026-11-03 · Multiple versions · Cite this page
Applies to: Vite / Vue Router
Symptom
Checklist
  1. Inspect the built index.html for asset URLs starting with /gis/.
  2. Read location.pathname to confirm the real deployment prefix.
  3. Search the code for fetch, image and tile paths beginning with a slash.
  4. 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
All 120 field notesChinese originalRunnable examples
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Cite this page

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).