Vue 3 Nginx 는 여러 웹 프로젝트, 포트, 도 메 인 이름 을 배치 합 니 다.
2922 단어 Vue
항목 1:http://localhost:8080/project1
항목 2:http://localhost:8080/project2
위 두 주소 로 항목 에 접근 하고 history 모드 를 사용 합 니 다.
작업 절 차 는 다음 과 같다.
첫 번 째 단계: vue. config. js 프로필 수정
project1：
module.exports = {
publicPath : '/project1',
...
};project2:
module.exports = {
publicPath : '/project2',
...
};주: base 를 수정 할 필요 가 없습니다. 프로젝트 자체 가 져 온 길 을 사용 하여 다음 과 같이 설정 합 니 다.
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});두 번 째 단계:
포장, 포장 파일 을 nginx 에 넣 고 본 고 는 html 폴 더 에 넣 습 니 다. 다음 과 같 습 니 다.
세 번 째 단계:
nginx. conf 프로필 수정
server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
#
location / {
root html;
index index.html index.htm;
}
# project1
location /project1 {
alias html/project1/; #project1
index index.html index.htm;
try_files $uri $uri/ /project1/index.html; # ：project1
}
#project2
location /project2 {
alias html/project2/; #project2
index index.html index.htm;
try_files $uri $uri/ /project2/index.html; # ：project1
}
location /api1 {
include uwsgi_params;
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://localhost:9999;
}
location /api2 {
include uwsgi_params;
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://localhost:1111;
}
}procject 1 과 procject 2 만 바 꾸 는 것 을 권장 합 니 다. 디 렉 터 리 는 Vue 의 PublicPath 와 일치 해 야 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
