iT邦幫忙

2025 iThome 鐵人賽

DAY 22
0

那昨天説了可以刻網頁下來,那接下來是不是會想到是否可以把生成出來的code輸出進本地呢?

答案是可以的,看到右上角有一個 export的按鈕

https://ithelp.ithome.com.tw/upload/images/20251006/201686298HK5KdgK4b.png

輸出到 VSCode 的步驟

  1. 導出專案程式碼
    • 在 Open Lovable 專案界面裡,尋找「Export」或「GitHub」按鈕。
    • 點擊「Export」後,會出現「同步到 GitHub」的選項(如果沒看到直接下載,基本都需要走 GitHub)。
    • 首次使用須登入並授權 GitHub 帳號.
  2. 在 GitHub 下載程式碼
    • 在專案完成導出到 GitHub 後,進到你自己的 GitHub Repo。
    • 於專案頁點擊「Code」→「Download ZIP」。這樣就下載到本地了.
  3. 在 VSCode 打開程式碼
    • 將下載好的 ZIP 解壓縮,打開 VSCode(或任何編輯器)。
    • 用「Open Folder」選取剛剛解壓縮的資料夾即可。
    • 建議於 VSCode 終端機執行 npm install 安裝依賴;用 npm run dev 開發預覽.

延伸說明

  • Open Lovable 不支援直接本地下載,主要用 GitHub 做媒介.
  • 所有生成的程式碼(React、JSX、CSS、路由等)都在下載的資料夾裡,一般結構跟你在 Localhost 預覽看到的一樣。
  • 這樣的流程也方便和團隊協作,Git 做版本控制很容易推送到 Vercel、Netlify 等平臺.

問題

https://ithelp.ithome.com.tw/upload/images/20251006/20168629gFTbBuuVcB.png

https://ithelp.ithome.com.tw/upload/images/20251006/20168629DG16dNujxp.png

如果AI流正常,create-zip遇到400,大機率是請求資料不全或沙盒API權限問題。建議檢查 create-zip API送出的參數,並等全部檔案生成後再操作。如持續無法導出可手動copy或用GitHub同步方式折衷

如果遇到以上的問題的話,就只能一個一個複製貼上進vscode了,不然就是要檢查自己的sandbox的API是否有問題。

明天的話就會解釋一下react的程式碼哦~


上一篇
day 21
下一篇
day 23
系列文
玩Switch 2 不如 玩Stitch Lab:用 Stitch 加速你的網頁開發24
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言