react build 후 패키지 발표 총화
1.백 스테이지 인 터 페 이 스 는 크로스 도 메 인 설정 이 필요 합 니 다.
(1)서버 에서 Access-Control-Allow-Origin 응답 헤드 를 이용 하여 해결한다.
Access-Control-Allow-Origin:*를 설정 하여 모든 도 메 인 이름 의 스 크 립 트 가 이 자원 에 접근 할 수 있 도록 합 니 다.
안전 문 제 를 고려 하면 Access-Control-Allow-Origin:www.build.im 도 설정 할 수 있다. 특정 도 메 인 이름 접근 허용
(2)서버 가 역방향 프 록 시 를 한다.
2.파일 을 포장 하여 서버 를 따로 설치한다.
(1)react 항목 build 패키지 후 build 복사 웹 서버 루트 디 렉 터 리 에 있 는 파일
(2)웹 루트 디 렉 터 리 에 htaccess 파일 을 설치 해 야 합 니 다.파일 내용 은 다음 과 같 습 니 다.(서버 가 길 을 찾 지 못 할 때 index.html 로 자동 으로 돌아 갑 니 다. 루트
비고 첨부:
전단 로 컬 개발 시 크로스 필드 문제 가 존재 합 니 다.프로젝트 가 creat-react-app cli 라면. 만 든 것 은 package.json 에 직접 있 습 니 다. 파일 에 추가 api 주소 디 렉 터 리:"proxy":"www.api.com:8000"은 도 메 인 문 제 를 해결 할 수 있 습 니 다.만약 에 자신 이 만 든 프로젝트 라면.
프 록 시 설정 middlle 미들웨어 도 대 리 를 실현 할 수 있 습 니 다.로 컬 fecth('api/userinfo',fucntion(){});요청 이 발 송 됩 니 다. http://www.online.com:80/api/userinfo 인터페이스
proxy: {
'/api)': {
target: 'http://www.online.com:80/',
changeOrigin: true
},
}
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.html [QSA,PT,L]
</IfModule> 명령:nginx/nginx.conf 파일 설정
server {
...
location / {
try_files $uri /index.html
}
}
부 딪 힌 구덩이
1.설치 사용
npm install -g create-react-app
create-react-app my-app3.항목 디 렉 터 리 에 들 어가 미리 보기
cd my-app
npm start
create-react-app 비계 로 만 든 디 렉 터 리 는 간단 하고 불필요 한 파일 이 없습니다.
그러나 포장 할 때 작은 문제 가 발생 했 습 니 다.npm run build 후 이 항목 은 build 파일 을 생 성 합 니 다.그러나 저 는 그 중의 index.html 파일 을 클릭 하여 열 면 브 라 우 저 는 공백 페이지 입 니 다.이것 은 잘못된 보고 입 니 다.
해결 방법:package.json 프로필 에"homepage":"..."를 추가 합 니 다.
이것 은 build 이후 의 경로 문제 입 니 다.상대 경로 로 바 꾼 후에 이 index.html 파일 을 다시 열 면 정상적으로 탐색 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
nginx 에서 사이트 아이콘 표시 설정전단 개발 환경: react：^16.4.1 webpack：^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
