我按照这个网站的指示，我已经尝试了一个空的create-react-app项目，它工作得很好
但是当我在部署过程完成后尝试我现有的项目时，它说
Firebase Hosting设置完成您看到这个是因为您已经成功地设置了Firebase Hosting。现在是时候去构建一些非凡的东西了！
所以我很好奇我错过了什么
这里是package.json
{
"name": "iplace",
"version": "0.1.0",
"private": false,
"dependencies": {
"node-sass": "^4.10.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}firebase.json
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}我已经执行了firebase初始化（更改公共-〉构建）〉npm运行构建〉firebase部署
这是项目结构
这里是index.html文件（我很想知道为什么index.html仍然有欢迎使用firebase的措辞...）
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Welcome to Firebase Hosting</title><script defer="defer" src="/__/firebase/5.7.0/firebase-app.js"></script><script defer="defer" src="/__/firebase/5.7.0/firebase-auth.js"></script><script defer="defer" src="/__/firebase/5.7.0/firebase-database.js"></script><script defer="defer" src="/__/firebase/5.7.0/firebase-messaging.js"></script><script defer="defer" src="/__/firebase/5.7.0/firebase-storage.js"></script><script defer="defer" src="/__/firebase/init.js"></script><style media="screen">body{background:#eceff1;color:rgba(0,0,0,.87);font-family:Roboto,Helvetica,Arial,sans-serif;margin:0;padding:0}#message{background:#fff;max-width:360px;margin:100px auto 16px;padding:32px 24px;border-radius:3px}#message h2{color:#ffa100;font-weight:700;font-size:16px;margin:0 0 8px}#message h1{font-size:22px;font-weight:300;color:rgba(0,0,0,.6);margin:0 0 16px}#message p{line-height:140%;margin:16px 0 24px;font-size:14px}#message a{display:block;text-align:center;background:#039be5;text-transform:uppercase;text-decoration:none;color:#fff;padding:16px;border-radius:4px}#message,#message a{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}#load{color:rgba(0,0,0,.4);text-align:center;font-size:13px}@media (max-width:600px){#message,body{margin-top:0;background:#fff;box-shadow:none}body{border-top:16px solid #ffa100}}</style><link href="/static/css/main.6f735e8f.chunk.css" rel="stylesheet"></head><body><div id="message"><h2>Welcome</h2><h1>Firebase Hosting Setup Complete</h1><p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p><a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a></div><p id="load">Firebase SDK Loading…</p><script>document.addEventListener('DOMContentLoaded', function() {
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
//
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
try {
let app = firebase.app();
let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
} catch (e) {
console.error(e);
document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
}
});</script><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={2:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/1.734eb6b0.chunk.js"></script><script src="/static/js/main.14da6ff9.chunk.js"></script></body></html>
7条答案
按热度按时间f2uvfpb91#
第一个任务
您需要在公共文件夹的index.html中将此代码替换为以下代码：
第二个任务：
第三个任务：
第四项任务：
运行以下命令：firebase初始化它会问：您要为此目录设置哪些Firebase功能？选择：托管：为Firebase托管配置文件并（可选）设置GitHub Action部署
然后选择：请选择一个选项：使用现有项目，然后选择项目名称
第五项任务：
(Type要在其中初始化应用程序的文件夹名称。如果是react应用程序，则会生成该文件夹。）要将什么用作公共目录？build
第六项任务：
（在单页应用程序中选择"是"）配置为单页应用程序（将所有URL重写为/index.html）？是
第七项任务：
使用GitHub设置自动构建和部署？否
第八项任务：
(Run此命令）npm运行构造/Yarn构造
最后一个任务：
(Run此命令）火力点部署
我的情况就是这样。
kmbjn2e32#
您已经使用firebase初始化期间firebase创建的默认值覆盖了index.html。
地址：
1.删除当前索引. html
1.获取您的原始index.html
1.再次运行火线初始化。
1.当它要求你覆盖你的“index.html”-说不。
enxuqcxy3#
我也遇到了同样的问题，这很混乱，因为它部署了。原来我必须确保运行
然后等待几分钟，让站点显示出来。这里假设您没有修改react index.html文件
uujelgoq4#
您需要在index.html文件中添加这一行。
然后它会工作，你可以添加它之前尝试{}.
a0x5cqrl5#
在
firebase.json中，而不是放置
然后
mmvthczy6#
你说“我很好奇为什么
index.html还有欢迎使用firebase的字眼”，很可能是因为你的构建过程没有覆盖它。很难从您添加到帖子中的元素和图片中判断出这一点，但是当您使用
npm run build时，您要么没有构建react项目，要么是在dist目录下构建，而该目录根本不是publicFirebase文件夹。您应该将构建结果复制到public文件夹，然后重新部署。uoifb46i7#
如果您之前已将应用上传到GitHub Pages：
您需要进入
package.json并删除"homepage": "<your github link>"。出于某种原因，即使您正确地遵循了所有步骤，该行也会阻止Firebase检测build文件夹的内容。如果你想在GitHub和Firebase上托管，我建议你有两个分支：用
main或master来托管Firebase，用gh-pages（用gh-pages创建）来托管GitHub分支。