Reactjs 将React应用程序从Codesandbox部署到Github页面

我随后将react应用程序部署到github页面。我在codesandbox中创建了我的react应用程序，并将我的sandbox导出到我的应用程序。我下载了node.js、npm和git

我的文件夹结构： 用户>测试>package-lock.json+andair-master>（内部andair-master）节点\u模块+build>（内部构建）public+src+package.json

我下载了我的github项目“andair master”，并将其内容复制粘贴到一个空文件夹“test”中

---

我打开GitBash并更改目录，直到进入“andair master”。我先是“git init”，然后是“git remote add origin”，然后是“npm run deploy”。我意识到我丢失了一个“build”文件夹，所以我在“andair master”文件夹中创建了一个。然后我将我的“src”和“public”文件夹放在“build”文件夹中，并尝试运行“npm run deploy”。仍然不起作用。我注意到我的github缺少一个gh pages分支。我不知道如何创建gh pages分支，也不知道为什么“npm运行部署”不起作用。如果有人能告诉我我是否错过了一步，那将是非常感激的。谢谢。

以下是代码中的部署脚本：

"deploy": "gh-pages -d build"

这意味着gh pages工具使用build目录进行部署，所以您需要两件事才能使其正常工作

• 使用以下命令正确创建生成文件夹：

• 现在为您的本地添加安装gh页面工具：

现在您可以运行deploy命令了，它就可以工作了。

---

我希望这能对您有所帮助。

您的

create react app

项目中缺少一些依赖项。这可能是因为您试图从codesandbox导出项目（但我不确定）

你必须先把它们修好

依赖项1（

反应脚本

）：

依赖项2（

节点sass

，因为您在项目中使用的是

scss

）

依赖项3（

gh页面

）

完成上述步骤后，验证package.json是否与下面的结构匹配

{
  "name": "and-air",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "homepage": "https://develijahlee.github.io/andair/",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.25",
    "@fortawesome/free-regular-svg-icons": "5.11.2",
    "@fortawesome/react-fontawesome": "0.1.5",
    "node-sass": "^4.13.0",
    "react": "16.9.0",
    "react-dom": "16.8.6"
  },
  "devDependencies": {
    "gh-pages": "^2.1.1",
    "react-scripts": "^3.2.0",
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

执行此步骤后，请验证是否使用名称

gh pages

npm install gh-pages --save-dev

单击github中的设置选项卡

向下滚动到GitHub页面部分，并将您的分支切换到

gh页面

分支

当页面处于活动状态时，您应该会收到一条成功消息

---

谢谢。在下载丢失的依赖项后，我终于收到了一条“编译成功”的消息。在通过git bash登录我的github帐户后，我终于得到了一个“gh pages”分支，但我得到了一个404错误。我试着看了看你的分叉回购协议，一切似乎都和我的相似。我的Github pages源代码是“gh pages”，所以我不确定为什么会出现404错误。如果您对此事有任何建议，我将不胜感激。谢谢。尝试过这个URL吗。我可以看到部署的应用：）啊，我现在看到了，我猜它只是在加载。非常感谢你的帮助！好的，你可以走了：）。我删除了我的样本回购，再次感谢你，但我想知道你是如何得到这些图片的？我使用Chrome开发者工具将“./img”路径更改为“./img”，这似乎解决了这个问题。我访问了andair/src/App.js，将图像路径从两个点更改为一个点，并将文件提交到github，但更改尚未显示。

npm install react-scripts --save-dev

npm install node-sass --save

npm install gh-pages --save-dev

{
  "name": "and-air",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "homepage": "https://develijahlee.github.io/andair/",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.25",
    "@fortawesome/free-regular-svg-icons": "5.11.2",
    "@fortawesome/react-fontawesome": "0.1.5",
    "node-sass": "^4.13.0",
    "react": "16.9.0",
    "react-dom": "16.8.6"
  },
  "devDependencies": {
    "gh-pages": "^2.1.1",
    "react-scripts": "^3.2.0",
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

npm run deploy