我的 React 项目在部署到 Firebase 托管后无法正常工作

Question

我的 React 项目在部署到 Firebase 托管后无法正常工作

Joe*_*oey 8 firebase reactjs firebase-hosting

我正在按照此网站的说明进行操作，并且我已经在尝试使用一个空的 create-react-app 项目并且工作正常

但是当我在部署过程完成后尝试使用现有项目时它说

Firebase 托管设置完成您看到此消息是因为您已成功设置 Firebase 托管。现在是时候去创造一些非凡的东西了！

所以我很好奇我错过了什么

这是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"
  ]
}

Run Code Online (Sandbox Code Playgroud)

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Run Code Online (Sandbox Code Playgroud)

我已经执行 firebase init (change public-> build) > npm run build > firebase deploy

这是项目结构

这是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&hellip;</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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 7

第一个任务

\n

您需要将此代码替换为 public 文件夹的index.html 中的以下代码：

\n

\r\n

<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8" />\n    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />\n    <meta name="viewport" content="width=device-width, initial-scale=1" />\n    <meta name="theme-color" content="#000000" />\n    <meta\n      name="description"\n      content="Web Chat Application created using professional technologies" \n    />\n    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />\n    <!--\n      manifest.json provides metadata used when your web app is installed on a\n      user\'s mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/\n    -->\n    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />\n    <!--\n      Notice the use of %PUBLIC_URL% in the tags above.\n      It will be replaced with the URL of the `public` folder during the build.\n      Only files inside the `public` folder can be referenced from the HTML.\n\n      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will\n      work correctly both with client-side routing and a non-root public URL.\n      Learn how to configure a non-root public URL by running `npm run build`.\n    -->\n    <title>Programmer Dost</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id="root"></div>\n    <!--\n      This HTML file is a template.\n      If you open it directly in the browser, you will see an empty page.\n\n      You can add webfonts, meta tags, or analytics to this file.\n      The build step will place the bundled scripts into the <body> tag.\n\n      To begin the development, run `npm start` or `yarn start`.\n      To create a production bundle, use `npm run build` or `yarn build`.\n    -->\n  </body>\n</html>

Run Code Online (Sandbox Code Playgroud)\r\n

\r\n

\n

第二个任务：

\n

删除 .firebaserc 文件。
删除 firebase.json 文件。

\n

第三个任务：

\n

删除 \xe2\x80\x9c.firebase\xe2\x80\x9d 文件夹。
删除 \xe2\x80\x9cbuild\xe2\x80\x9d 文件夹。

\n

第四个任务：

\n

运行命令：firebase init\nit 会询问：\n您要为此目录设置哪些 Firebase 功能？\n选择：托管：为 Firebase 托管配置文件并（可选）设置 GitHub Action 部署

\n

然后选择:\n请选择一个选项：使用现有项目\n然后选择您的项目名称

\n

第五项任务：

\n

（输入要在其中初始化应用程序的文件夹名称。如果是 React 应用程序，则会构建该文件夹名称。）\n您想使用什么作为公共目录？建造

\n

第六个任务：

\n

（在单页应用程序中选择“是”）\n配置为单页应用程序（将所有 URL 重写为 /index.html）？是的

\n

第七个任务：

\n

使用 GitHub 设置自动构建和部署？不

\n

第八个任务：

\n

（运行此命令）\nnpm run build /yarn build

\n

最后一个任务：

\n

（运行此命令）\nfirebase 部署

\n

就我而言，这就是它的工作原理。

\n

Answer 2

Ren*_*nec 0

你说\xc2\xab我很想知道为什么index.html仍然有欢迎使用firebase措辞\xc2\xbb。很可能只是因为您的构建过程不会覆盖它。

\n\n

从您添加到帖子中的元素和图像中很难判断，但是当您这样做时，npm run build您要么不构建您的 React 项目，要么将其构建在dist根本不是publicFirebase 文件夹的目录中。您应该将构建结果复制到该public文件夹，然后重新部署。

\n

归档时间：	6 年，10 月前
查看次数：	18526 次
最近记录：	2 年，7 月前