创建 React App 构建无法正常工作答案

【问题标题】：Create React App build does not work correctly创建 React App 构建无法正常工作
【发布时间】：2021-01-15 01:43:25
【问题描述】：

您好，我是 CRA 的新开发人员。我有一个项目，我用 create react app 创建了它。当我使用run npm run build 时，它无法设置只有一个测试按钮的主页。我在 package.json 中添加了 react-router-dom 和 homepage:"./"。在 localhost 中，我可以正确使用并查看所有内容，但是当使用 npm run build 尝试时，我无法访问任何内容，并且 build 显示空白页面。我该怎么办？你对我有什么建议吗？我不知道一切是否正常。

App.Tsx：

 import React from 'react';
    import { Route, Switch,BrowserRouter } from 'react-router-dom';
    import HomeDashboard from './containers/Home' 
    
    function App() {
      return (
        <div className="App">
          <BrowserRouter>
          <Switch>
            <Route exact path="/home" component={HomeDashboard}></Route>
            <Route exact path="/" component={HomeDashboard}></Route>
          </Switch>
          </BrowserRouter>
        </div>
      );
    }
    export default App;

package.json：

 {
      "name": "test",
      "version": "0.1.0",
      "private": true,
      "homepage": "./",
      "dependencies": {
        "@types/react-dom": "^16.9.8",
        "@types/react-router-dom": "^5.1.5",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "3.4.3",
        "typescript": "^3.9.7"
      },
      "scripts": {
        "build": "react-scripts build",
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      
    }

构建文件夹：

【问题讨论】：

我认为这是因为你需要服务它才能正常看到它
尝试使用npm install -g serve 安装serve，然后使用serve -s build 为您的构建目录提供服务

标签： reactjs

【解决方案1】：

这是意料之中的。您构建的 index.html 通过绝对链接引用所有 javascript 和 css 文件，如果您只是在计算机上打开它，它将不起作用。您必须从服务器提供它。在本地，您可以使用 serve npm 包：

npm install -g serve
cd ./build
serve .

【讨论】：

我的目录中没有像 dist 这样的文件夹。为什么？
对不起，在你的情况下它被称为 build

【解决方案2】：

npm run build 命令只是将您的 React 应用程序编译为纯 html、javascript、css。
它不会在您的本地主机或其他地方提供它。您可以通过使用浏览器打开 /build/index.html 来查看构建的应用程序，但由于实际路径、路由和 cors 策略，这可能无法正常工作。

您可以按照文档中的说明使用serve 提供服务： https://create-react-app.dev/docs/deployment/

【讨论】：

感谢您的文档。我将在部署过程中关注它。

【解决方案3】：

聚会有点晚了。
我在尝试在 gh-pages 上部署应用程序时遇到了同样的问题。
这个解决方案对我有用。

添加到我的 package.json 中：

"homepage": "https://{username}.github.io/projectname/",

向Router组件添加basename（BrowserRouter作为Router）：

<Router basename="/projectname">

【讨论】：