在 Vercel 上部署 React 应用程序后出现空白屏幕答案

【问题标题】：Blank screen after deploying react app on Vercel在 Vercel 上部署 React 应用程序后出现空白屏幕
【发布时间】：2021-08-19 14:34:09
【问题描述】：

我的 package.json 文件我也尝试在其中包含以前的解决方案“主页”...

我在这里错误地添加了任何语法错误或引用？我的构建成功，但我只能在部署的站点中看到一个空白页面

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@material-ui/core": "^4.12.2",
    "@material-ui/pickers": "^3.3.10",
    "@reduxjs/toolkit": "^1.6.1",
    "@syncfusion/ej2-react-calendars": "^19.2.55",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.2",
    "framer-motion": "^4.1.17",
    "mdbreact": "^5.1.0",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.0-beta.4",
    "react-calendar": "^3.4.0",
    "react-datepicker": "^4.1.1",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-minimal-side-navigation": "^1.9.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-switch": "^6.0.0",
    "rsuite": "^4.10.2",
    "web-vitals": "^1.0.1",
    "homepage": "."
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我在其中导入了所有 React 和 Redux 路由器的 App.js 文件..

import "./App.css";
import Sidebar from "./Components/Sidebar";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import FoodCatalog from "./Components/Pages/FoodCatalog";
import 'bootstrap/dist/css/bootstrap.min.css';
import Promotions from "./Components/Pages/Promotions";
import UserManagement from "./Components/Pages/UserManagement";
import axios from 'axios';
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { createStore, applyMiddleware, compose } from "redux";
import reducer from './redux/reducers'
import Tickets from "./Components/Pages/Tickets";



function App() {
  return (
    <Provider store={store}>
    <BrowserRouter>
      <div className="App">
        <div>
          <Sidebar />
        </div>

        <div style={{width: '100%',overflow: 'hidden'}}>
          <Switch>
            <Route path="/foodcatalog" component={FoodCatalog } />
            <Route path="/promotions" component={Promotions } />
            <Route path="/usermanagement" component={UserManagement } />
            <Route path="/tickets" component={Tickets } />
          </Switch>
          
        </div>
      </div>
    </BrowserRouter>
    </Provider>
  );
}

export default App;

【问题讨论】：

在构建应用程序并为其提供服务时是否会发生这种情况（例如使用serve）
它构建成功，但我只能看到一个空白页
所以和vercel无关

标签： javascript html reactjs deployment vercel

【解决方案1】：

您是否尝试过进入您的 vercel 环境变量并输入：

CI=false

有时 vercel 在生产中需要该环境变量。

【讨论】：

您好，感谢您的评论。是的。我在设置中这样做是为了解决我的构建错误。我对建筑没问题。只是空白屏幕让我感到困扰。

【解决方案2】：

指定“主页”

如果您使用 create-react-app，则无需处理 Webpack 配置。（这很好）相反——无论是否弹出——我们只需要在 package.json 中指定“主页”：

example

create-react-app 设置 webpack 配置的方式，这会将 publicPath 替换为您应用的正确基本 URL。（如果您想了解更多关于 publicPath 设置的信息，请查看 Webpack 文档）

请参考：https://www.andreasreiterer.at/fix-whitescreen-static-react-app/

【讨论】：