React 프로덕션 빌드가 브라우저에서 실행되지 않는 이유는 무엇입니까?
리액트 빌드 툴을 사용하여 리액트 앱을 작성하려고 합니다.npm start를 시도하면 앱이 정상적으로 동작합니다.
npm start
http://localhost:3000 => 어플리케이션에 액세스 할 수 있습니다.
그러나 응용 프로그램을 빌드하고 빌드 폴더의 "index.html" 파일에 액세스하려고 하면 작동하지 않고 흰색 화면이 나타납니다.
npm run build
http://myreact-app/build/index.http => 흰색 화면.
npm run build 실행 후 생성된 빌드 폴더입니다.
이것이 index.html 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<link href="/static/css/main.9a0fe4f1.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.46d8cd76.js"></script>
</body>
</html>
내가 뭘 잘못하고 있나요?아파치 웹 서버에서 빌드된 index.html 파일에 액세스할 수 없습니까?
아직 눈치채지 못하셨겠지만, 당신의 html 파일이 css와 스크립트 파일을 올바르게 Import할 수 없을 것 같습니다.파일 구조를 보면 빌드에 대한 모든 것이 빌드 폴더 아래에 있는 것을 알 수 있습니다.그러나 html 파일에서는 파일 경로 앞에 슬래시("/")가 있습니다.그렇기 때문에 브라우저는 "빌드"의 부모에서 이러한 파일을 찾습니다.슬래시를 제거해 보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<style></style>
<link href="static/css/main.65027555.css" rel="stylesheet">
</head>
<body
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="static/js/main.316f1156.js"></script>
</body>
</html>
위의 문제는 다음 항목을 추가하면 극복할 수 있습니다.
"homepage":".",
당신의 안에서package.json이것은 공식적이지는 않지만 따라하기 좋은 해킹입니다.
https://github.com/facebookincubator/create-react-app/issues/1487
이 문제를 해결하려면build폴더는 다음과 같습니다.manifest.json파일, 파일을 열면manifest.json다음 항목이 있습니다.
"start_url": ".",
로 변경하다
"start_url": "/",
문제를 해결하는 다른 방법이 있습니다.
리액션 프로젝트 구축에 앞서package.json파일 및 지정homepage의 재산..value 또는 사이트 베이스의 URL을 사용해 주세요.
{
....
"homepage": ".",
......
}
여기서 serve 패키지를 사용하여 한 페이지 앱을 실행해 보십시오.
npm install -g serve글로벌하게 설치하다serve help도움말 텍스트를 보다serve --single build싱글 페이지 앱에 대응합니다.리액트 앱에 액세스할 수 있는 서버가 시작됩니다.
위 중 아무 것도 효과가 없다면.아마도 문제는 당신이 사용하고 있다는 것이다.react-router-dom그리고 그 경로들은 특별한 컴파일러를 필요로 하고htmls에 존재하는 각 페이지에 대해router설정을 실시합니다.
참조: create-react-app을 사용하고 있으며 서버 없이 브라우저에서 직접 build/index.html을 열어야 합니다.
요약하자면,<HashRouter>대신<Router>및 a<Switch>wrapper를 참조해 주세요.예를 들어 다음과 같습니다.
<Switch>
<Route exact path='/' component={WelcomePage} />
<Route exact path='/game' component={GamePage} />
</Switch>
루트가 다음과 같이 변경되는 것을 고려해 주십시오.
http://localhost:3000/#/ -> Root page
http://localhost:3000/#/game -> Other page
로컬 서버 플러그인/확장을 설치해야 합니다.
vscode 사용자인 경우 라이브 서버 확장을 검색하여 설치합니다.에디터 하단에 "Go live" 옵션이 있습니다.
다른 에디터 사용자(atom/sublime)의 경우 라이브 서버 플러그인을 검색합니다.
내용이 제공되지 않는 이유는 빌드 디렉토리 외부에서 "serve -s" 명령이 실행되었기 때문일 수 있습니다.올바른 방법은 빌드 디렉토리로 이동한 후 여기서 "serve -s"를 실행하는 것입니다.
나는 한 잔이 있었어요index.php할 수 .index.html.
BrowserRouter 대신 HashRouter를 사용하고 있으며 다음과 같이 모든 URL 앞에 /#을 추가해야 합니다.
href={`/#/blogs/${slug}`}
이것은 나에게 효과가 있어, 고마워.
도 한번 써보세요.<HashRouter><Router> 말고, 꼭, 꼭, 꼭import {HashRouter}.
언급URL : https://stackoverflow.com/questions/44371052/why-wont-react-production-build-run-on-the-browser
'bestsource' 카테고리의 다른 글
| angular.js에서 우클릭 이벤트를 처리하려면 어떻게 해야 합니까? (0) | 2023.02.09 |
|---|---|
| TypeScript에서 강력한 유형의 어레이를 만듭니다. (0) | 2023.02.09 |
| 템플릿이 create-react-app을 사용하여 제공되지 않음 (0) | 2023.02.09 |
| Alarmofire.request().responseJ의 결과값을 취득하는 방법손, 스위프트2? (0) | 2023.02.09 |
| JSON.parse 동안 노드에서 예외 발견 (0) | 2023.02.09 |