切换语言为:繁体
教你在github pages上部署自己的项目

教你在github pages上部署自己的项目

  • 爱糖宝
  • 2024-11-13
  • 2039
  • 0
  • 0

首先登录到github,找到你要部署的仓库,然后找到Settings 教你在github pages上部署自己的项目

选一下要部署的分支,save保存一下

教你在github pages上部署自己的项目

然后刷新一下页面,可以看到,已经出现了一个访问的站点地址,说明你部署成功了。

教你在github pages上部署自己的项目

打包问题

部署成功之后,上面的配置会默认找项目根(root)目录下面的index.html加载,所以一定要保证你根目录下有index.html,且必须是打包之后的,换句话说,你需要把你打包之后的文件push到仓库去,而不是源代码。

静态资源404

按照上面的配置,你的域名是这样的https://用户名.github.io/项目名/ 。如果你不做任何处理的话,页面会白屏,因为没有拿到对应的静态资源,github pages 默认把我们的项目部署在 /项目名/ 这个子域名下,而不是https://用户名.github.io/ 根域名,我们本地开发的时候,都是默认根域名,那如何解决这个问题呢?

修改配置文件 vite.config.js

export default defineConfig({
  base: "react-layout", // 项目名
  plugins: [react()],
});

这样修改的话,是没有问题的。但是如果你项目里面用到了location.pathname,在对pathnamesplit操作之后,会多了一层 react-layout,看起来很别扭,为什么服务器的目录地址,还要我在项目里面做兼容呢?别着急,有办法解决。

设置路由的basename

const App = () => {
  return (
    <BrowserRouter basename="react-layout">
      ...routes
    </BrowserRouter>
  );
};

找到你注册路由的地方,将basename加上去,然后在项目里面,不要直接用window.location,如果你是router v6版本,推荐使用useLocation()来获取location,如果你是router v5版本,可以使用props.location(需要用withRouter包裹一下组件)。

通过react路由提供的方法获取到的location.pathname,是不包含basename的。所以你可以完全不用被它所影响。

子路由刷新404

到了这一步,基本上可以正常看到自己部署的项目内容,但当我访问到某个子路由,一不小心刷新了浏览器,就会出现404,为什么会有这个问题呢?为什么本地开发不存在呢?在github pages如何解决?真实项目线上服务器又是如何解决的呢?

  • 因为我用的是history路由,所以当我浏览器url改变的时候,浏览器就会把我当前url地址看成后端的接口地址去请求(如果你配置的是hash路由,不会有这个问题)。很明显,在这个域名下面,后端并没有提供这个接口,所以404了。

  • 本地不会有这个问题是因为本地服务器做了处理。如果没有对应的后端接口,就会把index.html文件返回回来,有了index.html,就会执行前端路由,然后走前端路由的逻辑。

  • 知道了怎么走到前端路由的逻辑,要解决这个问题就比较简单了。把index.html复制一份,然后改名为404.htmlgithub pages如果找不到的话,会直接返回404.html404.html里面的内容其实就是index.html,然后走前端路由逻辑。

  • 真实项目一般都是用nginx代理,所以需要在nginx里面配置一下它的location

location / {
    try_files $uri $uri/ /index.html;
}

作者:sensFeng
链接:https://juejin.cn/post/7436479025987452980

0条评论

您的电子邮件等信息不会被公开,以下所有项均必填

OK! You can skip this field.