Day24 多平台展望：Web 之外還能怎麼走？

2026 iThome 鐵人賽

DAY 24

Modern Web

《九重燼》Vue3 + PixiJS + Ink.js 視覺小說遊戲開發全紀錄系列第 24 篇

18th鐵人賽

碼力獅 Malilion

2026-08-24 02:20:42

72 瀏覽

分享至

前幾天整理的，都是已經落地的系統：存檔、選項、音訊、Pixi 場景和資源預載。到了 Day24，我原本想直接談「Web 之外還能怎麼走」，但回頭對照 repo 後，發現更值得先說清楚的是：現在到底做到哪裡，哪些還停在規劃階段。

《九重燼》現在的主軸仍然是 Web。Vercel 是實際部署平台，npm run build 是正式建置流程，PWA 已經接上 vite-plugin-pwa，但目前只快取一小部分 app shell 資源，沒有把整包美術與音訊做成離線遊戲。Electron、Steam、Tauri 目前也沒有專案骨架。

目前的正式部署路線：Vercel

先看 vercel.json：

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "cleanUrls": true,
  "trailingSlash": false
}

也就是說，正式部署時 Vercel 會跑 npm run build，然後把 dist 當靜態輸出目錄。

package.json 裡的 build 指令不是只有 vite build：

"build": "npm run check:ink && npm run generate:manifest && npm run generate:sections && vite build"

這裡有三個前置步驟：

check:ink：編譯 Ink 劇本，並輸出 src/narrative/compiled/main.json。
generate:manifest：產生圖片與音訊預載 manifest，包括 Day23 提到的 preload-manifest.json。
generate:sections：產生 src/data/chapter-sections.json 章節分段資料。

最後才交給 Vite 打包。這代表部署不是「把前端丟上去」這麼簡單；每次 build 都會重新編譯劇本，並重產資源清單與章節資料。對互動敘事遊戲來說，這些步驟尤其重要，因為劇情資料一錯，畫面再漂亮也沒用。

路由：多入口靜態站，不是單一 Vue Router 應用

vercel.json 還有幾條 rewrite：

{ "source": "/play", "destination": "/play.html" },
{ "source": "/ranking", "destination": "/ranking.html" }

入口頁、遊戲頁、排行頁各自有 HTML。vite.config.ts 也把它們列成三個 input：

input: {
  portal: resolve(__dirname, 'index.html'),
  play: resolve(__dirname, 'play.html'),
  ranking: resolve(__dirname, 'ranking.html'),
}

所以這不是傳統 Vue Router 的單頁站，而是 Vite 多入口靜態站。/play 只是被 Vercel 導到 play.html，/ranking 導到 ranking.html。除了 assets/、story/、manifests/、api/ 與三個入口 HTML 之外的路徑，才會回到 index.html。

這個做法很適合現在的專案：Portal、遊戲本體、排行榜彼此獨立，又可以共用同一組 Vite build。

快取標頭：素材可以長效快取，劇本不能

Vercel 設定裡也把快取分開：

{
  "source": "/assets/(.*)",
  "headers": [
    { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
  ]
}

/assets/ 主要放圖片和音訊，可以使用長效快取。檔案名稱穩定時，瀏覽器不用每次重新下載。

但 /story/ 和 /manifests/ 是另一回事：

"public, max-age=0, must-revalidate"

劇本和 manifest 不能像圖片一樣快取一年。故事修一句台詞、章節資料更新、結局條件調整，如果玩家一直拿到舊 JSON，存檔和劇情狀態就可能對不上。這也是 Day12 存檔版本化會遇到的同一個問題：遊戲資料會變，不能假裝每個版本都永遠相容。

PWA

PWA 支援已經接上，但範圍刻意壓得很小。

vite.config.ts 已經引入：

import { VitePWA } from 'vite-plugin-pwa'

設定也已經存在：

VitePWA({
  registerType: 'autoUpdate',
  workbox: {
    globPatterns: ['**/*.{js,css}'],
    navigateFallback: null,
  },
  manifest: {
    name: '九重燼 Embers of the Ninefold Court',
    short_name: '九重燼',
    start_url: '/play.html',
    display: 'standalone',
    orientation: 'any',
  },
})

這代表 build 後會有 PWA manifest 和 service worker。public/pwa/ 也有 icon：