• next项目部署GitHub pages遇到的坑-静态资源路径问题
  • 发布于 2个月前
  • 366 热度
    0 评论
next项目部署GitHub pages有两个小坑,今天就来说到说到。

坑一 静态资源地址
当你build打包了静态资源之后,你会push到你的GitHub仓库中,这个时候你会发现只有index.html可以打开,其他的静态资源统统404找不到地址,查看代码发现静态资源的地址都是错误的,例如你线上的正确地址是:<script defer="" nomodule="" src="/favorites/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script>,因为你的仓库名称:favorites,所以只有添加了/favorites的前缀才会打开,但是实际上传之后地址是:/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js,少了/favorites,就会造成资源的404状态。

解决办法:
在next的配置文件中添加:
# next.config.js
basePath: '/favorites',
给你的静态资源添加一个前缀就好了,然后重新编译打包,再次push到仓库,结果你会发现你的地址已经完全正确了!甚至通过浏览器的工具查看了请求地址,绝对是没有问题的,但是......

坑二 _惹的祸
通过浏览器的工具查看了静态资源的请求地址,绝对是没有问题的,但是依然是404,你仰天长啸:卧槽,这是见鬼了么?

这世界没有鬼,如果看似正确的事情却出现了不正常的现象,那么就一定是有人在捣鬼!没错,是GitHub搞得鬼!GitHub的静态页面服务竟然不支持_这个符号,也就是说/_next/static/chunks/XXXX这个地址是无法识别的,所以才会出现404这个鬼!那么结局的办法是:

在你的 Next.js 项目中,你可以通过在构建脚本中添加一些自定义操作来实现在输出目录(例如 out 目录)中自动生成一个 .nojekyll 文件。这样做可以确保在部署到 GitHub Pages 时,静态资源能够正确地被访问,而不会受到 Jekyll 处理的影响。

你可以建一个脚本,每次打包的时候都自动生成一个.nojekyll的空文件在out目录中,这样就解决了!再次push GitHub仓库,一切正常了

总结
真是见鬼了!
用户评论