在開發中可能一個項目包含多個子項目，如前端項目和背景管理的項目放在同一個伺服器目錄中。
前端項目位址是
www.w3h5.com
，背景管理項目位址是
www.w3h5.com/admin
。
這樣會遇到一個問題，本地開發是好的，部署後就沒反應了，頁面無法正常打開，而且沒有報錯？
沒有報錯！ 這是應用部署在非根路徑的典型現象。為啥會有這個問題？因為路由沒有比對上，比如你把應用部署在
/xxx/
下，然後通路
/xxx/hello
，而代碼裡比對的是
/hello
，那就比對不上了，而又沒有定義 fallback 的路由，比如 404，那就會顯示空白頁。
可通過配置 base 解決，找到配置檔案
/.umirc.ts
添加如下配置。
export default defineConfig({
base: '/path/ourAppRoot',
// ...
}; 複制
也會遇到首頁可以打開，比較輸入路由位址就打不開了，在首頁點選菜單可以通路，但是重新整理就又不行了。
這時需要修改一下伺服器的配置，以 Nginx 為例：（Nginx配置檔案位置為
/etc/nginx/nginx.conf
）
server {
# ...
location / {
# ...
# 增加下列指令， index.html 可換為項目中使用的其它檔案名
try_files $uri $uri/ /index.html;
}
} 複制
知識擴充：
Nginx 的
try_files
指令的使用方式有兩種：
try_files file ... uri;
try_files file ... =code; 複制
該指令用于根據指定的參數依次檢查尋找對應的檔案，若所有檔案都找不到将會在内部重定向至最後一個參數指定的檔案。
當使用
=code
時，代表若找不到對應的檔案将傳回
code
對應的錯誤。
uri 代表請求的檔案及其路徑，uri/ 表示對應路徑的目錄。
例如請求 http://example.com/page 時，uri 表示資源目錄下是否存在名為 page 的檔案，uri/ 表示名為 page 的目錄。
是以，我們在配置檔案中增加的指令表示接收到請求時先尋找
uri
對應的檔案或目錄，若不存在則傳回
index.html
檔案。
未經允許不得轉載：w3h5 » Umi&React打包部署到非根目錄及重新整理報錯404的問題解決