nginx 여러 vue 프로젝트 를 배치 하 는 방법 예시

4347 단어 nginx배치 하 다.vue
이전 편 에 서 는 웹 프로젝트 를 소개 하고 설정 하 였 습 니 다.오늘 은 회사 의 수요 로 인해 같은 도 메 인 네 임 포트 에 두 개의 프로젝트 를 배치 해 야 합 니 다.오늘 오전 내 내 마침내 다 했 으 니 서둘러 필 기 를 하 는 것 을 선택 하 세 요.
아 리 클 라 우 드 서버 를 어떻게 연결 하 는 지 는 여기 서 말 하지 않 습 니 다.제 이전 글 을 보 세 요.
우선 필요 한 효과
http://47.97.244.83/login
http://47.97.244.83/student/login
파일 디 렉 터 리

두 항목 이 같은 폴 더 안에 병렬 되 어 있다.
vue 프로젝트 두 개 준비 해 주세요.
http://47.97.244.83/login:이 건 설정 을 수정 하지 않 고 build 하면 됩 니 다.관건 은 2 급 도 메 인 이름 의 vue 프로젝트 입 니 다.수정 이 필요 합 니 다.
우선 config 폴 더 에 있 는 index.js 에서 수정 합 니 다.(주의:build 내)

// nginx   
 assetsPublicPath: '/student/',

이렇게 생산 된 파일 을 확보 하면 index.html 에서 모두 student 아래 에 있 습 니 다.

index.html 파일 수정
첨가
마지막 build 의 index.html 파일 은 다음 과 같 습 니 다.

<!DOCTYPE html>
<html>
<head>
	<meta base=/student/ >
	<meta charset=utf-8>
	<meta http-equiv=X-UA-Compatible content="IE=edge">
	<meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=./favicon.ico>
	<title>        </title>
	<link href=/student/static/css/app.26c5efbf7403094b0b351615f215dca8.css rel=stylesheet>
</head>
<body>
	<noscript><strong>        </strong></noscript>
	<div id=app></div>
	<script type=text/javascript src=/student/static/js/manifest.c07ff685ddc74bf39577.js></script>
	<script type=text/javascript src=/student/static/js/vendor.63945df20397482ff39e.js></script>
	<script type=text/javascript src=/student/static/js/app.39f0baab8f580b8d4bc2.js></script>
</body>
</html>
src/router/index.js 파일 수정
base 추가:'/student/',

Nginx 설정 수정

server {
  listen  80;
  server_name localhost;
		# root /usr/local/sixiucheng/codes;
  location / {
   root /usr/local/sixiucheng/codes/dist;
   
	 try_files $uri $uri/ @router;
   index index.html index.htm;
  }

		location /student { 
		alias /usr/local/sixiucheng/codes/student/;
	 try_files $uri $uri/ /student/index.html;
   index index.html index.htm;
  }
  location @router {
   rewrite ^.*$ /index.html last;
  }
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
   root html;
  }
 }
여기 루트 조심 하 세 요.

하 나 는 전역 적 인 단일 도입 입 니 다.전역 적 인 루트 를 설명 할 때 2 급 설정 에서 루트 를 alias 로 바 꿔 야 합 니 다.아래 그림

그래서 이 설정 은

마지막 으로 리 셋 조심 하 세 요!!!

nginx -s reload
메모:80 포트 가 실패 하면
1.nginx 설정 을 확인 하고 nginx-t 를 사용 하여 오류 정보 가 있 는 지 확인 합 니 다.
2.로 컬 방화벽 80 여 부 를 확인 합 니 다.
3.클 라 우 드 호스트 라면 보안 팀 이 80 권한 을 열 었 는 지 확인 합 니 다.
별말
01...처음에 alias 를 root 로 써 서 html 페이지 의 css 와 js 를 404 로 만 들 었 습 니 다.나중에 바 이 두 는 다음 말 을 더 하면 문 제 를 해결 할 수 있다.그러나 이렇게 하면 모든 js,css 가 도입 한 위 치 를 수정 할 수 있 습 니 다.여기 조심 하 세 요.

#   css，js    
		 location ~ .*\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt)$ 
		 		{
		 			root /usr/local/sixiucheng/codes;
		 			proxy_temp_path /usr/local/sixiucheng/codes;
		 		}
02...인터넷 에 alias 의 경로 가 있 습 니 다.root 와 alias 의 차 이 는(개인 적 인 이해,오류 희망 점)에 있 습 니 다.

location /file/{
alias /var/html/file; #            /var/html/file
}
location /file/{
root /var/html/file; #            /var/html/file/file
}
여기 서 nginx 가 여러 vue 프로젝트 를 배치 하 는 방법 에 대한 예 시 를 소개 합 니 다.더 많은 nginx 가 여러 vue 프로젝트 를 배치 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 십시오.앞으로 많은 지원 을 바 랍 니 다!
iOS 모든 캐 시 인 스 턴 스 코드 지우 기
re 모듈 의 정규 일치 하 는 표현 식 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage