Douyin Vue 仿抖音實測：影片真的播得動，後端是一包靜態檔

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

在 GitHub 上看到「開源版抖音」四個字，多數人腦中浮現的是一個能登入、能刷推薦、能看見真實內容池的替代客戶端。把 zyronon 的 Douyin Vue 打開之後，第一個要修正的正是這個想像：它是一份用 Vue3 把抖音介面做到幾可亂真的前端教科書，介面後面沒有伺服器、沒有帳號系統、沒有內容演算法，你滑到的每一支影片，都來自倉庫裡的靜態 JSON 檔，一支都不經過伺服器。有趣的部分在這裡：那些影片的播放連結直接指向抖音的 CDN，此刻依然真的能播。

我用行動版視窗實際跑了官方示範站，錄下它發出的每一個網路請求。第一支影片自動開播，長度 25.8 秒，畫面流暢；往上滑，下一支接著出現，預載的機制明顯有做，切換時沒有黑屏等待。側錄裡的影片流量路徑都一樣：先打 douyin.com 的播放介面，拿到 302 轉址，再落到抖音自己的影音 CDN。也就是說，介面是別人寫的，資料是假的，但影片本體一直以來都是從抖音的伺服器流出來的。這篇文章把「哪些部分是真的、哪些部分是道具」逐一攤開，你看完可以自己決定要不要玩它、自架它，或者直接把原始碼抓來讀。

Pin

順帶一提觀看方式。這個專案是照手機螢幕的邏輯做的，README 的提醒是用 Via 或 Chrome 開啟，別的瀏覽器可能強制把影片全螢幕而破版；在電腦上看，得先按 F12 把瀏覽器切成行動裝置模擬才會正常。它甚至還留了一支 2024 年 2 月用 uniapp 打包的 Android 體驗版 APK 在 release 頁，不過那個版本同樣停在兩年半前，要不要裝舊安裝檔，你自己衡量。

先把身分講清楚：這是 Vue 教學作品，規格卻是照著產品做的

專案在 GitHub 上累積 11,549 顆星，授權採 GPL-3.0，作者是中國前端工程師 Zyronon，個人檔案上的自我介紹還停留在「Looking For A Good Job」。他為這個專案寫了六篇連載文章，從輪播組件、無限滑動一路講到部署，定位寫得明白：模仿抖音的行動端短影音專案，展示 Vue3 加上 Vite 與 Pinia 在手機上的實踐。

教學作品通常做得陽春，這一份的完成度卻反常地高。推薦流的上下滑動、雙擊愛心、留言面板、個人頁、搜尋欄，抖音行動版該有的介面元素幾乎都做出了來。那六篇連載也把「怎麼做出來」拆得很慷慨：第一篇講他自己用兩百行程式碼寫了一個輪播組件，第二篇講影片無限滑動的實作，第三篇講路由與轉場動畫，第四篇講有條件的路由快取，後兩篇一篇從部署 GitHub Pages 講到打包 Docker 映像，另一篇處理 rem 與動態 vh 的行動版自適應。一個想學行動端 Vue 的人，照著這六篇讀原始碼，能挖到的東西比多數付費課程扎實。README 裡「媲美原生 App 絲滑流暢」是作者的宣稱，我的實測手感是動畫確實順，但順的背後有一個多數分享文不會告訴你的事實：它沒有後端。

Pin

假後端的真面目：838 支影片裝在兩包靜態檔裡

讀原始碼可以看到整個資料層的設計。專案用了一套叫 axios-mock-adapter 的函式庫，它的作用是在瀏覽器裡把所有發出去的 API 請求攔截下來，然後回傳專案自己準備的 JSON 檔案。換句話說，應用程式以為自己在跟伺服器要資料，實際上每個請求都在你自己的瀏覽器裡被攔下、被餵假答案。README 對這點倒是誠實，明說資料全部存在專案本地、後端請求都是模擬出來的。

第一包是 src 目錄下的 posts6.json，只有六筆，是開站第一秒的種子資料：彭十六elf 的馬面裙與國慶短片各一支，加上劉思瑤nice、李子柒、我是香秀、達莎Digi，五位真實創作者的六支影片。第二包更大：頁面載入一秒後，程式會再去抓 public/data 下的 videos.json，我把整包數過，832 筆，幾乎每筆都帶著自己的抖音播放連結。兩包相加，推薦池總共 838 支，全部凍在倉庫裡的靜態檔案，分頁是照順序往後取，每頁十支。

這也是它跟一個真正的抖音網頁版之間最根本的差異。真抖音的推薦流後面是活的內容池與演算法，每次刷新都有新東西；這裡的推薦流是一個 838 支影片的密閉魚缸，照這批影片的平均長度估，大概四五個小時就會刷到見底，之後就停在存量裡打轉。留言、個人頁的影片列表、搜尋結果同樣吃假資料，私訊的內容則是直接寫死在組件裡，連攔截層都不經過；搜尋欄打了字，也只會在這 838 支的宇宙裡找答案。想拿它來當每天的短片來源，存量看完就見底；想拿它來理解一個短影音 App 的介面如何組裝，這個魚缸反而尺寸正好。

影片為什麼還播得動：寫死的連結指向抖音 CDN

這些假資料裡有一個耐人尋味的細節。每筆的影片欄位，放的不是示範用的空檔，而是帶著 video_id 與簽名的抖音官方播放連結。我實測的當下，抽到的連結有效：瀏覽器向 douyin.com 的播放介面請求，伺服器回 302，把流量導到 douyinvod.com 的 CDN 節點，影片就這樣播了出來。種子六支裡最長的是李子柒那支豌豆豐收，全長 3 分 32 秒，與大池子裡其他影片一樣連著抖音的管線；頭像與封面圖同樣直接引用 douyinpic.com 的圖床。整個「抖音感」的視聽層，走的都是抖音自家的基礎設施。

posts6 這包連結在 2025 年 6 月全檔換過一次，距今約一年四個月，仍活著；我只能確認「此刻有效」這個事實，無法替它背書明天。連結失效的那一天，這個示範站就會變成一支影片都播不出來的空殼介面，而修復的方式只剩一種：有人去手動更新那些 JSON 檔。對照維護現況（下一節會談），這個風險不是杞人憂天。

另一個值得記下的細節是請求清單裡的兩個外部依賴。頁面的 Vue 執行環境從 360 的 baomitu CDN 載入，介面圖示則即時呼叫 api.iconify.design，我的側錄裡它出現了 18 次。百度統計的腳本在原始碼裡被註解掉了，所以這個站本身沒有主動遙測，但離線環境或某個 CDN 抽風時，頁面會缺件。要自架的人，這三個名字值得先記住。

從 git 歷史看維護現況：爆紅、長尾，與最後那個廣告

這個專案的 git 歷史說了一個很典型的開源故事。2021 年 11 月第一筆 commit，前兩年緩慢累積，2023 年 99 筆，然後 2024 年迎來爆發：全年 422 筆 commit、三月與四月連發兩個正式版，被 Trendshift 收錄、HelloGitHub 推薦，星數一路衝上萬顆。

曲線在之後垂了下來。2025 年全年只剩 22 筆 commit，2026 年至今 13 筆，而且內容幾乎全是多語言 README 更新與 dependabot 的依賴升級。原始碼目錄最後一次實質改動停在 2025 年 6 月 12 日，commit 訊息是「更換預設影片」。正式版號則從 2024 年 4 月之後就沒有新增過，專案曾用 uniapp 打包 Android 體驗版 APK，三個 release 各掛了一支，同樣停在那個時間點。倉庫還留著給中國使用者加速的 Gitee 鏡像，README 尾部則掛著作者的其他作品：一個在網頁上背單字的 typing-word，以及一批實用油猴腳本，都與這個主專案同一個人維護，量級也小得多。

還有一段改動值得單獨拿出來講。2025 年 10 月 2 日，作者推送了一個名為 feat:sponsor 的 commit，在各語言版的 README 頂部加上 Skywork.AI 的推廣橫幅，文案寫著「十分鐘讓產出翻十倍，限今日免費」；三個月後的 2026 年 1 月 6 日，那批 README 更新把橫幅整批拆掉了。一個曾經月更數十次的功能型專案，近年最有故事的改動是一則廣告的上架與下架，這個對比本身就說明了它現在的脈搏。issue 版面也符合這個觀察：最新的真實問題回報（有人把這個頁面用小程式 web-view 嵌入時影片不自動播放）從三月躺到現在，七個多月無人回應，旁邊滾動的都是機器人的依賴升級單。

授權自己打架：GPL-3.0 與「不得商業使用」同時存在

關於能不能拿這份程式碼做事，倉庫裡存在兩句互相矛盾的話。LICENSE 檔案是完整的 GPL-3.0 全文，這份授權允許商用、允許修改、允許再散布，條件是衍生作品同樣開源；但 README 的執行說明又寫著這份專案僅供學習研究、不得用於商業用途。

法律上，授權條款以 LICENSE 檔為準的說法比較通行，作者在 README 加的禁令能否拘束下游並不確定。但對實際想 fork 的人，我的建議是保守解讀：要商用，先想辦法問到作者本人（他的信箱就掛在 commit 紀錄裡），或者只把它當參考實作、自己重寫關鍵部分。順帶一提，GPL-3.0 有傳染性，你的衍生作品必須同樣以 GPL 釋出，這對想做閉源產品的人是硬門檻。

想自己跑一份：三條路與各自的代價

只是想體驗，直接開官方示範站最省事，手機瀏覽器或桌面版的開發者工具行動模擬都可以，代價是內容只有那 838 支存量。想長期玩或改著玩，倉庫提供了一行指令的 Docker 映像（ghcr.io/zyronon/douyin-vue），本機起一個 nginx 容器就有一份自己的副本，要注意的是它一樣連著抖音 CDN 與兩個外部資源站，斷網就殘。想讀懂它，clone 下來跑 npm install 與 npm run dev 就能在本機 3000 埠起開發模式；README 特別提醒必須用 git clone 取得原始碼，直接下載 zip 壓縮包會跑不起來，這種小坑它都寫在了說明裡。六篇連載文章照著走，是這個專案價值密度最高的用法。

三條路都不需要帳號，也都不會有任何資料寫回抖音。反過來說，它也沒有帳號可以登、沒有影片可以上傳、沒有創作者可以做，所有社群功能都只是介面示範。若你需要的其實是把抖音內容存下來的工具，這個方向的現成選擇不少，我們先前實測過的 阿抖批量採集助手、Snap Douyin 無浮水印下載，或能把整個帳號備份成資料庫的 DYM 抖音備份，都比這份教學作品對口；想反向把作品發布到抖音，則可以看 抖音自動發布助手 的實測。

當替代品會受騙，當教材正好

回到開頭的問題。把它當抖音的替代品，你會在 838 支存量刷完之後感到受騙；把它當一份得了萬顆星的前端教材，它是稀有動物等級的學習素材：介面完整度夠高、原始碼乾淨、附六篇作者的實作連載，而且示範站此刻還活著，影片還播得動。它教的核心課題也只有這種專案教得動，在沒有後端的約束下，一個短影音介面的手感是怎麼用 Vue3 撐起來的。順帶一提，抖音官方自己的網頁版這幾年也一直在改，真正想在電腦上刷抖音的人，官方入口始終是最穩的那條路。

兩個帶走前要記的但書。其一，影片連結的壽命不受這個專案控制，播放失效是遲早的機率問題，不要把示範站當穩定影片來源。其二，授權矛盾尚未解開之前，商業使用請先取得作者同意。其餘的，享受魚缸裡那批影片就好，李子柒那支值得看完。