2026/10/18 · AI 上線專家

用 Lovable、Bolt、v0 做好的網站，下載下來之後要放到哪裡？

用 Lovable、Bolt、v0 做好的網站，下載下來之後要放到哪裡？

工具裡跑得好好的，為什麼下載下來就不知道怎麼辦？

您用 Lovable、Bolt.new 或 v0 這類工具做了一個網站，在工具的預覽視窗裡看起來很順暢——表單能填、按鈕能按、畫面也漂亮。但當您按下「匯出」或「下載」，拿到一個 zip 檔案之後，突然就卡住了：這包東西要放到哪裡？怎麼讓它變成一個有網址、別人能開的正式網站？

這個困惑的核心，在於工具內建的預覽環境和真正的上線部署是兩回事。<cite index="7-6,7-7,7-8">Lovable、Bolt、v0 都會在工具內提供即時預覽，讓您看到效果，但這個預覽網址通常只是暫時的測試環境，不是您能長期掌握、對外公開的正式網站</cite>。真正的「上線」，需要您把程式碼放到一個穩定的主機服務（hosting）上，並且確認這包程式碼在離開工具之後，還能正常運作。

匯出時要確認的三件事：您拿到的是什麼、缺了什麼、能放到哪裡

1. 您拿到的檔案是「前端靜態檔案」還是「需要後端的完整專案」？

<cite index="9-12,9-13">v0 只產生前端的 React 元件</cite>，<cite index="9-14,9-15,9-16">Bolt 可以產生包含 Express 後端和 SQLite 資料庫的專案，但這些功能在瀏覽器沙盒裡跑，匯出後需要自己部署</cite>，<cite index="9-17,9-18,9-19,9-20">而 Lovable 則直接整合 Supabase 作為後端，可以產生完整的資料庫結構、API 呼叫，並自動推送到 GitHub 和 Netlify</cite>。

如果您的網站只有畫面、沒有會員登入、沒有要儲存資料，那您拿到的很可能是一包「靜態檔案」（HTML、CSS、JavaScript），可以直接放到 Vercel、Netlify 或 Cloudflare Pages 這類免費靜態主機上。<cite index="13-3">這些平台會要求專案的根目錄裡有一個 index.html 檔案</cite>，這是網站的入口——如果沒有這個檔案，部署後會看到 404 錯誤。

但如果您的網站需要會員系統、訂單查詢、即時通知，那您需要的就不只是靜態檔案，還要有後端伺服器和資料庫。這時候要確認：工具幫您產生的後端程式碼（例如 Supabase 的設定、Node.js 的 API 路由）是不是也一起匯出了？如果沒有，您就要自己補齊這部分，或者選擇繼續使用工具內建的後端服務（例如 <cite index="6-1">Lovable 的 Supabase 整合讓您不需要手動設定，就能拿到一個可以直接用的後端</cite>）。

2. 工具給您的「內建網址」是暫時的，還是可以長期用的？

<cite index="7-9">Lovable 的免費方案會給您一個 lovable.app 的網址，Bolt 會給您 bolt.host 的網址，v0 則會把專案部署到 Vercel</cite>。這些網址在測試階段很方便，但有幾個限制您要知道：

  • lovable.app 和 bolt.host 的免費網址通常只能在工具的免費或付費方案內使用，如果您之後不想繼續付費，這個網址可能會失效。
  • <cite index="7-9">要使用自己的網域名稱（例如 www.yourcompany.com），通常需要升級到 Pro 方案（每月 25 美元起）</cite>。
  • 如果您想完全掌握網站，不受工具限制，就要把程式碼匯出，放到自己選擇的主機上。

3. 匯出的程式碼能不能「直接用」，還是要改東改西才能跑？

<cite index="5-5,5-6,5-7,5-8,5-9,5-10,5-11,5-12">所有三個工具都支援程式碼匯出和 GitHub 同步。v0 匯出的是乾淨的 React/Next.js 元件，可以無縫部署到 Vercel；Bolt 匯出的是完整專案，但可能包含一些平台特定的設定；Lovable 則透過 GitHub 同步提供完整的程式碼存取</cite>。

實務上，您要檢查的是：

  • 環境變數：如果您的網站需要連接資料庫、串接金流、呼叫第三方 API，這些「金鑰」和「連線字串」通常不會直接寫在程式碼裡（如果寫了，那就是另一個資安風險）。您要在部署平台的設定介面裡手動填入這些環境變數。
  • build 指令：有些工具產生的專案需要先「編譯」（build）才能部署。例如 React 專案通常要跑 npm run build，產生一包優化過的靜態檔案。Vercel 和 Netlify 會自動偵測並執行這個步驟，但如果您用其他主機，就要自己確認。
  • 相依套件：程式碼裡用到的第三方函式庫（dependencies）要確認版本相容，不然部署時可能會出現「本地能跑、上線就壞」的狀況。

從下載到上線：一個實際的部署流程

假設您已經用 Lovable 做好一個簡單的會員系統，現在要讓它正式上線，流程大概是這樣：

  1. 確認專案類型：您的專案有前端（React）、後端（Supabase），屬於「需要後端的完整專案」。
  2. 選擇主機平台：<cite index="7-3,7-4">對於大部分流量在一萬次以下的 Lovable 或 Bolt 應用，工具內建的主機就夠用了；v0 的專案則已經在 Vercel 上跑</cite>。如果您想要更多控制權，<cite index="7-4">Cloudflare 是任何流量級別下最便宜的靜態主機選擇</cite>。
  3. 匯出程式碼：<cite index="7-9">Lovable 的每個方案都支援 Git 同步；付費方案還能直接下載 zip 檔</cite>。把專案同步到您自己的 GitHub repository。
  4. 連接部署平台：<cite index="10-6,10-8,10-13,10-14">在 Netlify 登入後，點選「New site from Git」，選擇您的 GitHub repository，設定 build 指令（如果需要），然後點「Deploy site」</cite>。Netlify 會給您一個網址，通常幾分鐘內就能看到網站上線。
  5. 設定環境變數：如果您的專案需要連接 Supabase，要在 Netlify 的專案設定裡，把 Supabase 的 API URL 和 anon key 填進「Environment Variables」欄位。
  6. 綁定自己的網域（選配）：<cite index="12-8,12-9,12-10,12-11,12-12">在 Netlify 的專案設定裡進入「Domains」，輸入您的網域名稱，然後依照指示在網域註冊商那邊新增 DNS 記錄（通常是 A 記錄或 CNAME），等幾分鐘驗證通過，SSL 憑證會自動產生</cite>。

如果您用的是 v0，<cite index="10-17,10-19,10-21,10-22,10-24">流程更簡單：進入 Vercel 儀表板，點「New Project」，選擇您的 Git repository，Vercel 會自動偵測專案類型並設定 build 參數，點「Deploy」就完成了</cite>。

下一步：確認您真正擁有這個網站

當您的網站順利上線之後，還有一件事要確認：這個網站真的是您的嗎？

如果程式碼在工具內、網域綁在工具的帳號下、資料庫也是工具幫您開的，那您其實沒有完全掌握這個系統。真正的擁有權，來自於：

  • 程式碼在您自己的 GitHub repository 裡，而且您有完整的存取權限。
  • 網域是在您自己的帳號下註冊的（例如在 Gandi、Cloudflare 或您習慣的網域商），不是借用工具的子網域。
  • 主機和資料庫的帳號是您自己的，不是透過工具代管——這樣就算哪天不想用這個工具了，網站還是能繼續跑。

如果您現在手上有一個「做好了、但不知道怎麼上線」的專案，不確定少了哪一塊、該找誰幫忙補齊，歡迎透過我們的免費程式碼健診服務讓我們看一下您的專案現況——我們會告訴您，這包程式碼距離「真正上線」還差哪幾步，以及每一步的實際作法和合理成本。