最近將 GitHub repo 的前端作品部署到了 vercel，然而在部署時並非一帆風順(不網上說的那麼簡單TT)，因此順手記錄下來，提醒自己未來不要再採坑，也希望能幫助到需要的人~
專案背景
我最近開發了一個純前端多語系網站，技術包含：
- React 18
- Vite 5
- React Router（動態路由
/:lang） - i18next（國際化支援）
專案結構如下：
i18n_demo/
├── package.json
├── vite.config.js
├── src/
└── public/
遇到的問題
1. 根目錄與 GitHub repo 結構問題
第一次部署時，網站畫面直接顯示 404。
後來發現原因是我的 GitHub repo 結構問題。我上傳的是 i18n_demo 資料夾，專案程式碼都在這個資料夾裡。
而 Vercel 預設會把 repo 根目錄當作專案根目錄，因此在部署時如果沒有設定 Root Directory，就會找不到 package.json 或 dist，導致部署失敗或 404。
解法：在 vercel 專案設定中，將 Root Directory 設為我上傳的 i18n_demo
vercel 建立專案畫面，Root Directory 應填入專案資料夾
點選 Edit 後可直接選擇對應資料夾
2. 輸入網址或 f5 刷新網頁出現 404
當我成功部署後，利用其他設備輸入網址 (.../en) 查看卻出現 404，回來電腦刷新頁面也會出現 404。
- 這是因為 SPA 是單頁應用，前端路由是 JavaScript 控制
- 當瀏覽器直接訪問 /en、/zh 時，伺服器會嘗試去找 /en 這個文件
- 但 SPA 中這些路徑並沒有對應的檔案
- 出現 404
網路上查到的做法是在跟目錄新增一個 vercel.json，並寫上：
{
"rewrites": [
{ "source": "/(.*)", "destination": "/" }
]
}
這會讓所有的路徑導向 index.html，讓 React Router 處理前端路由。加上後，/en 或 /zh 這些語言設定就不會被伺服器阻擋。
3. 資源路徑錯誤
即使我新增了這個檔案卻還是會出現 404 的問題，因為：
- 這時候瀏覽器已經拿到 index.html，頁面開始渲染
- js/css/img 等資源會依照當前網址的「基準路徑」去抓資料。
(例如瀏覽器在/en時會去/en/assets找資源) - 最後的結果也是 404。
要解決這個問題，需要修改 vite.config.js 的配置：
export default defineConfig({
base: "./", // 新增這行
plugins: [react()],
})
把 base 改成 './' 會讓 vite build 後使用相對路徑，也就是所有資源都會從 ./assets 這邊找，而不是去 /en/assets、/zh/assets。
總結
要將 GitHub 專案部署到 vercel 需要注意：
- 確認 GitHub repo 架構，並根據架構在 vercel 專案設定正確的 Root Directory
- 新增 vercel.json 並加入 rewrite 規則
- 修改 vite.config.js 的 base
參考
