如何在 GitHub 页面上发布 Ionic 5 网站?

How to publish a Ionic 5 website on GitHub pages?

我已经在 GitHub 页面上毫无问题地发布了一些网站。我通常的工作流程是建立一个网站,上传到我的存储库的根目录(/)或文档(/docs)目录并在设置中设置GitHub页。

这是我第一次使用 Ionic。我写了一个网站,我用 运行 ionic build --prod 建立了它。 然后我将我的内容上传到 repo 的 /docs 目录。 当我访问网站 https://<nickname>.github.io/<myrepo>/ 时,它让我进入一个空白页面。使用 Google Chrome 开发工具检查,我可以看到脚本被引用 https://<nickname>.github.io/script.js 而不是 https://<nickname>.github.io/<myrepo>/script.js

我怎样才能让它发挥作用?我做错了什么?

您可以找到我项目的完整源代码here。大家可以自己搭建,有没有问题试试看。当我在我的本地网络服务器上执行该站点进行测试时,该站点可以正常运行。

如何使任何 React 网站与 GitHub 页面

一起工作

先决条件

  • 已安装 npm
  • 包含 React 项目的目录
  • git 在此目录上设置的存储库并链接到 GitHub
  • 上的远程

要遵循的步骤

  • 运行 npm install gh-pages --save-dev
  • 编辑package.json文件:
    • 添加这一行:"homepage": "http://githubname.github.io/repository"。使用您的昵称和存储库名称
    • scripts 部分添加这些行:
    • "scripts": {
          //...
          "predeploy": "npm run build",
          "deploy": "gh-pages -d build"
      }
      
  • 推送一个提交
  • git add .
    git commit -m "Create a React app and publish it to GitHub Pages"
    git push origin master
    
  • 您的网站位于 http://githubname.github.io/repository

有关详细信息,请参阅 this page

Ionic 5 的额外步骤

如果您使用的是 Ionic 5,仍然会出现一些错误。 在这种情况下,请访问 http://githubname.github.io/repository 上的网站并打开 Chrome 检查器工具 (CTRL + SHIFT + I)。 查看Console:某些JS或TS脚本无法加载。您可以看到浏览器正在以错误的路径查看脚本。

通过手动编辑 index.html,您可以将脚本指向正确的 URL。 将编辑后的 ​​index.html 上传到 GitHub 存储库的 gh-pages 分支中,一切顺利。