小龙龟 小龙龟
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • mysql
  • redis
  • k8s
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
发现
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

小龙龟

前端界的小学生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • mysql
  • redis
  • k8s
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
发现
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术文档

  • GitHub技巧

  • Nodejs

  • 博客搭建

    • 解决百度无法收录搭建在GitHub上的个人博客的问题
    • 使用Gitalk实现静态博客无后台评论系统
    • GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
    • 博客丢失静态文件和字体的问题
      • 丢失样式文件的场景1
      • 丢失样式文件场景2
      • 字体丢失场景
    • vdoing主题效果图
  • 技术
  • 博客搭建
xabcs
2025-04-10
目录

博客丢失静态文件和字体的问题

# 博客启动丢失样式文件和字体的问题

# 丢失样式文件的场景1

重现

部署在github pages时,使用xabcs.github.io/wild访问时丢失样式文件(因为仓库名称不是xabcs.github.io,所以要使用一个带uri后缀的地址访问仓库,而不是xabcs.github.io),在控制台报错:样式文件全部404

原因:config.ts 没有配置base

解决:

config.ts中配置base
base: '/wild'
1
2

# 丢失样式文件场景2

重现

部署在github pages时,使用xabcs.xabc.fun访问时丢失样式文件在控制台报错:样式文件全部404

原因: 配置了域名之后,可以直接通过xabcs.xabc.fun的根目录访问,base中的 /wild/ 配置没有去掉

解决: 注释掉config.ts的base配置

# 字体丢失场景

重现

部署在github pages时,使用xabcs.xabc.fun访问时,页面显示的字体不是期望的字体,项目build是提示language 不存在

原因: 在样式文件中引用字体的目录不对,去掉base中的/wild/后,字体文件的/wild/没有去掉

解决: 更改index.styl文件中字体的引用路径

@font-face
    font-family 'JetBrains Mono'
    src url('/fonts/LXGWWenkai/JetBrainsMono-Regular.woff2') format('woff2'),
    url('/fonts/LXGWWenkai/JetBrainsMono-Regular.woff') format('woff'),
    url('/fonts/LXGWWenkai/JetBrainsMono-Regular.ttf') format('truetype')
    font-weight 400
    font-display swap
    font-style normal
1
2
3
4
5
6
7
8

fonts前面不需要/wild/了

编辑 (opens new window)
上次更新: 2025/04/10, 13:45:08
GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
vdoing主题效果图

← GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床 vdoing主题效果图→

最近更新
01
AI开发广场
04-18
02
k8s调度策略之优先级和抢占,驱逐详解
04-14
03
gtid跳过单个多个事务的方法
04-09
更多文章>
Theme by Vdoing | Copyright © 2019-2025 Evan Xu | MIT License | 桂ICP备2024034950号 | 桂公网安备45142202000030
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式