Я создал приложение для реагирования и запустил 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 в качестве источника, это будет проще сделать.
Включены некоторые другие части моего кода ниже, заранее спасибо.
Пакет. 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"
}
манифест. 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": "*"
}
]
}
]
}
}
индекс. 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>