Question

我创建了一个React应用并运行npm run build，但是，当我单击index.html时，网络浏览器会打开一个空白页面。

我已经阅读了多种解决方案，但是都没有用。例如，在"homepage": "./"中包含"homepage": "."或package.json。以及将start_url中的"start_url": "."从"start_url": "/"更改为manifest.json。我尝试的另一种解决方案是像这样在我的basename="/"中加入BrowserRouter：

<BrowserRouter basename="/">
      <Route exact path="/" component={App} />
      <Route path="/something" component={Something} />
</BrowserRouter>,

当我使用serve -s build时，该应用程序可以正常工作，但是由于我必须将应用程序嵌入另一个网站内的<iframe>中，因此使用index.html作为源将是一种简单的方法为此。

在下面感谢我的代码中的其他一些部分。

Package.json

{
  "name": "example",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "dependencies": {
    ...
    "@material-ui/core": "^4.10.2",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@testing-library/jest-dom": "^5.10.1",
    "@testing-library/react": "^10.3.0",
    "@testing-library/user-event": "^12.0.2",
    "axios": "^0.19.2",
    "firebase": "^7.15.2",
    "npm-check": "^5.9.2",
    "react": "^16.13.1",
    ...
    "react-firebaseui": "^4.1.0",
    ...
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.0",
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  },
  "proxy": "https://asia-east2-example.cloudfunctions.net/api"
}

manifest.json

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffeeff"
}

firebase.json

{
  "hosting": {
    "public": "functions",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      }
    ]
  }
}

index.html （构建）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="something" />
    <link rel="apple-touch-icon" href="./logo192.png" />
    <link rel="manifest" href="./manifest.json" />
    <title>Title</title>
    <link href="./static/css/2.eec0e34d.chunk.css" rel="stylesheet" />
    <link href="./static/css/main.002abad3.chunk.css" rel="stylesheet" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>
      ...
    </script>
    <script src="./static/js/2.1e3b5120.chunk.js"></script>
    <script src="./static/js/main.673dd343.chunk.js"></script>
  </body>
</html>

Answer 1

最后找到了解决方案，我所要做的就是将BrowserRouter更改为HashRouter，这在URL中添加了一个哈希（＃）。像这样： file:///Users/example/Project/build/index.html#Route https://reactrouter.com/web/api/HashRouter

代码：

<Router basename="/" hashType="noslash">
   <Route exact path="/" component={App} /> 
   <Route path="/example" component={Example} />
</Router>

顺便说一句，谢谢您的帮助。

npm run build index.html创建没有错误/警告的空白页

1 个答案: