时间戳

首页 > 解决方案 > 如何在 GitHub 页面上发布 Ionic 5 网站？

github - 如何在 GitHub 页面上发布 Ionic 5 网站？

问题描述

我已经在 GitHub 页面上发布了一些网站，没有任何问题。我常见的工作流程是建立一个网站，上传到我的存储库的根 ( /) 或 docs ( /docs) 目录，并在设置中设置 GitHub Pages。

这是我第一次使用 Ionic。我写了一个网站，我通过运行来构建它ionic build --prod。比我将我的内容上传到/docsrepo 的目录。当我访问该网站https://<nickname>.github.io/<myrepo>/时，它使我处于空白页面。使用 Google Chrome 开发工具检查，我可以看到脚本被引用https://<nickname>.github.io/script.js而不是https://<nickname>.github.io/<myrepo>/script.js

我怎样才能让它工作？我做错了什么？

你可以在这里找到我的项目的完整源代码。您可以自己构建它，并尝试是否有问题。当我在本地 Web 服务器上执行该站点进行测试时，该站点可以正常运行。

标签： githubionic-frameworkgithub-pagesionic5

解决方案

如何让任何 React 网站与 GitHub Pages 一起工作

先决条件

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

要遵循的步骤

  • 跑npm install gh-pages --save-dev
  • 编辑package.json文件：
    • 添加这一行："homepage": "http://githubname.github.io/repository". 使用您的昵称和存储库名称
    • 在脚本部分添加这些行：
    • "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

有关更多信息，请参阅此页面

Ionic 5 的附加步骤

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

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

推荐阅读