Hexo部署后页面无法动态加载数据，服务端渲染问题怎么解决？

Top丶竞一提问于 2026-02-13 21:33:42 阅读 7

框架

我在用Hexo写博客时想加个天气组件，本地启动hexo server能正常调用API获取数据，但部署到GitHub Pages后就显示错误了。检查控制台发现是GET http://localhost:4000/api/weather 404，这明明是本地地址啊，部署后路径应该怎么改才对？

尝试在模板里用了相对路径：

fetch('/api/weather')

但这样部署到GitHub Pages后路径还是错的，难道要手动拼接仓库路径吗？或者是不是Hexo的配置里漏了什么参数？

另外发现主题里的广告组件也是动态加载的，他们是怎么处理部署后的路径问题的？求大神指点具体改代码还是改配置！

我来解答赞 3 收藏

反馈

1 条解答

令狐洋洋 Lv1

这个问题其实挺常见的，主要是路径处理没优化好。GitHub Pages部署后，你的站点根路径可能不是根目录，而是带了项目名的子路径，所以直接用相对路径或者localhost都会出问题。

先说解决方案：你需要在Hexo配置文件里找到 root 这个字段，把它设置成你的仓库路径，比如你的仓库名是 my-blog，那就改成 /my-blog/。这样Hexo生成的静态资源路径会自动带上这个前缀，动态请求的路径也会被正确解析。

然后在代码里优化一下API调用的写法。不要直接写死路径，用Hexo提供的 config.root 来拼接。举个例子：

const apiPath = ${window.location.origin}${config.root}api/weather;

fetch(apiPath)

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error('Error fetching weather:', error));

如果你的主题里有类似的动态组件，可以看看它们是不是用了类似的方式，通过 config.root 动态拼接路径。这种做法的好处是本地和线上环境都能兼容，不用手动改来改去。

另外提醒一下，GitHub Pages本身是静态托管服务，不支持服务端渲染或者动态API接口。如果你需要一个稳定的后端API，建议把天气数据的接口放到第三方服务上，比如Vercel、Netlify Functions，或者直接用现成的免费天气API服务。这样能避免跨域问题，也能减轻你自己的维护成本。

总结一下，重点就是两点：1. 配置好 root 路径；2. 动态拼接API地址。优化完这两点，你的天气组件应该就能正常工作了。

2026-02-14 08:01