我遵循了部署React应用程序的所有步骤，但是它在Github和My Components上部署了一个新的React App，并且My Code不存在。 我在Package.json文件中添加了“ homepage”和“ predeploy”，“ deploy”，但是当这些文件放在github上时，它消失了。 这是Github存储库的链接：https://github.com/cyumair/smartbrainapp
//This is my Package.json
{
"homepage": "https://github.com/cyumair/smartbrainapp",
"name": "final",
"version": "0.1.0",
"private": true,
"dependencies": {
"clarifai": "^2.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"react-tilt": "^0.1.4",
"tachyons": "^4.11.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^2.0.1"
}
}
//"predeploy" and "deploy" got disappeared When Uploaded on Github
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
答案 0 :(得分：0)
您的.gitignore文件当前忽略<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<!-- ####################################################### -->
<body>
<div class="slideshow-container">
<!-- ### want to get this kind of div , but with my data ###
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div> -->
<script type="text/javascript">
url = 'http://www.myUrl.com';
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var httpReq = new XMLHttpRequest();
httpReq.open("GET" , url , false);
httpReq.send(null);
var jsonObj = JSON.parse(httpReq.responseText);
var description = jsonObj[i].description
for ( i = 0 ; i < 9 ; i++) {
document.writeln('<div class=\"mySlides fade\">');
document.writeln('<div class = \"numbertext\">' + i + '/9</div>');
document.writeln('<a href = \"https://www.that-product.com\"><img src=\"' + jsonObj[i].url_image + '\" style="width :100%"></a>');
document.writeln('<div class=\"text\">' + description + '</div>');
}
</script>
</div>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
文件夹。这就是为什么您的文件没有被推送到github存储库中的原因。
build答案 1 :(得分：0)
通过更改＃生产来解决问题 ＃/ build ＃build /在.gitignore文件中 并在package.json文件中更改“ homepage”：“”。
然后在控制台中运行以下命令： $ git添加。 $ git状态（这表明我丢失的文件是新文件，需要提交） $ git commit -m“添加丢失的文件” $ git push -u原始主机 $ npm运行部署
我删除了旧存储库，并在新存储库上应用了相同的步骤，您可以在https://cyumair.github.io/smartbrain/
上看到正在运行的React App。 //package.json file
"homepage":"https://github.com/cyumair/smartbrainapp"
//Changed To
"homepage":"https://cyumair.github.io/smartbrainapp"
//.gitignore file
#production
/build
//Changed To
#production
build/