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

【问题标题】：npm run build index.html creates blank page without errors/ warningsnpm run build index.html 创建没有错误/警告的空白页面
【发布时间】：2020-11-01 22:07:16
【问题描述】：

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

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

<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>

【问题讨论】：

你的控制台有错误吗？？
firebase 有一个警告：`When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.，还有控制台中的另一行：Failed to get subsystem status for purpose {rejected: true, message: {…}}

标签： javascript html reactjs npm

【解决方案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>

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

【讨论】：