EdgeOne Pages 静态网站部署中 404 页面资源加载失败问题

问题现象

在使用 EdgeOne Pages 托管静态网站时，当用户访问一个不存在的路径（如 /nonexistent/page）时，服务器正确返回了自定义的 404.html 页面，但该页面中的 CSS、JS 等静态资源无法加载，导致页面样式和交互失效。

浏览器开发者工具观察到的错误资源请求路径：

https://example.com/nonexistent/assets/style.css
https://example.com/nonexistent/js/app.js

而实际资源位于根目录下：

https://example.com/assets/style.css
https://example.com/js/app.js

根本原因

该问题的本质是前端路由与静态资源路径解析机制的冲突：

单页应用（SPA）或前端路由模式：现代前端框架（如 Vue、React、Svelte）通常采用客户端路由，依赖 HTML5 History API 实现无刷新跳转
服务端回退机制：EdgeOne Pages 支持设置”自定义 404 回退页面”，将所有未匹配路径重定向至 404.html 或 index.html
资源路径解析逻辑：HTML 中若使用相对路径（如 assets/style.css），浏览器会根据当前 URL 的目录层级拼接请求路径，而非文件系统路径

解决方案

方案一：使用 `<base href="/">`（推荐）

在 <head> 中添加基准路径标签：

<head>
    <meta charset="UTF-8" />
    <title>404 - 页面未找到</title>
    <base href="/" />
    <link rel="stylesheet" href="assets/style.css" />
    <script src="js/app.js" defer></script>
</head>

优点：一次配置，全局生效
缺点：影响所有相对路径（包括链接、图片等）
适用场景：大型 SPA 项目

方案二：使用绝对路径引用

1 2	<link rel="stylesheet" href="/assets/style.css"> <script src="/js/app.js" defer></script>

优点：简单直接，兼容性强
缺点：需全局替换路径，维护成本高
适用场景：中小型项目

方案三：EdgeOne 重写规则配置

在 EdgeOne Pages 的路由规则中明确排除常见静态资源类型：

[
  {
    "pathPattern": "/assets/*",
    "serve": "/assets/{path}",
    "cache": true
  },
  {
    "pathPattern": "/images/*",
    "serve": "/images/{path}",
    "cache": true
  },
  {
    "pathPattern": "/js/*",
    "serve": "/js/{path}",
    "cache": true
  },
  {
    "pathPattern": "/css/*",
    "serve": "/css/{path}",
    "cache": true
  },
  {
    "pathPattern": "/.*",
    "serve": "/404.html",
    "status": 404
  }
]

优点：服务端控制，更安全
缺点：平台特定，迁移性差
适用场景：EdgeOne 平台专属项目

请求处理流程

用户请求 /nonexistent/page
    │
    ▼
路径是否存在?
    ├─ 是 ──→ 返回对应 HTML
    │
    └─ 否 ──→ 是否匹配静态资源?
                │
                ├─ 是 ──→ 返回 assets/image.css 等
                │
                └─ 否 ──→ 返回 404.html, 状态码 404
                            │
                            ▼
                    浏览器解析 HTML
                            │
                            ▼
                    基于当前 URL 请求资源
                            │
                            ▼
                    是否有 <base href="/">?
                            │
                            ├─ 是 ──→ 请求 /assets/style.css ✅
                            │
                            └─ 否 ──→ 请求 /nonexistent/assets/style.css ❌

修复操作（Hexo 主题）

对于 Hexo 博客，在主题的 head.ejs 文件中添加 <base href="/"> 标签：

修改文件：themes/defaultone/layout/components/header/head.ejs

<head>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
</head>

修改后重新生成部署：

1 2	hexo clean hexo g

然后将 public 目录内容重新上传到 EdgeOne 即可。

EdgeOne Pages 静态网站部署 404 问题修复