Repository navigation
fix(web): 修正资源 base 路径，GitHub Pages 站点才能打开 - #3
Merged
Merged
Conversation
…oads
The deployed Pages site has been showing a blank page. Root cause: the repo
had no vite.config.ts, so Vite used its default base of "/" and emitted
absolute asset URLs:
<script src="/assets/index-xxxx.js">
GitHub Pages serves this project site from /xguard-hook/, so those requests
went to https://<user>.github.io/assets/... and 404'd. The React app never
mounted. This is a pre-existing bug, not a regression: building the previous
commit (45a2ccc) produces the same absolute paths.
Vercel was unaffected because it serves the site from the domain root.
Fix
- add vite.config.ts with base: './' so assets resolve relative to the HTML.
Relative paths work for both the Pages subpath and the Vercel root, so no
per-platform config is needed.
- loadDeployment() now builds its candidate paths from import.meta.env.BASE_URL
instead of hardcoding "/deployments/...", and tries each candidate in turn.
Previously the deployment JSON would also have 404'd under a subpath.
Verified
- npm run web:build emits src="./assets/index-*.js"
- served dist/ from a local /xguard-hook/ subpath and loaded it in Chrome:
all six sections render, the risk curve and the five-node flow diagram are
present, body background is rgb(0,0,0) and border-radius is 0px
- forge test 12/12, npm run test:node 22/22, npm run submission:check:final
- no horizontal overflow at 1440 / 1280 / 390
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题
线上 GitHub Pages 站点一直是白屏。
根因：仓库里没有
vite.config.ts，Vite 用默认的base: '/'，构建出的 HTML 引用的是绝对路径：但 GitHub Pages 把项目站部署在
/<repo>/子路径下（本仓库是/xguard-hook/），浏览器会去
https://azen07508-debug.github.io/assets/...取文件 → 404 → React 挂不上 → 白屏。这不是本次改版引入的
用上一个 main 提交（
45a2ccc，2026-05-28）的代码构建，产物同样是src="/assets/index-Cf-2-VBb.js"。也就是说这个问题从部署第一天就存在。Vercel 上没事，因为 Vercel 部署在域名根路径。
修复
1. 新增
vite.config.ts，设base: './'相对路径让产物同时适配 Pages 子路径和 Vercel 根路径，不需要为两个平台维护两套配置。
2.
loadDeployment()改用import.meta.env.BASE_URL拼路径原来硬编码
/deployments/xlayer-mainnet.json。在子路径部署下，这个文件同样会 404。现在按候选顺序依次尝试，取到为止。
验证
产物路径
本地模拟子路径部署
把
dist/放到本地 HTTP 服务的/xguard-hook/下，用 Chrome 打开：topbar / page-head / flow-wrap / strip / dashboard / lower-grid全部渲染rgb(0, 0, 0)0px其余检查
forge test—— 12 / 12npm run test:node—— 22 / 22npm run web:build—— 通过npm run submission:check:final—— 通过合并后
合并到
main会触发 Pages 重新部署，线上站点才会第一次真正可用。