vue 프로젝트 패키지 후 요청 주소 오류/패키지 후 크로스 필드 작업

vue 프로젝트 npm run dev 시 도 메 인 간 요청 이 정상 이지 만 포장 후 요청 주소 가 잘못 되 었 습 니 다(요청 주소 가 존재 하지 않 습 니 다).데 이 터 를 요청 하지 않 습 니 다.

vue 프로젝트 에서 자주 사용 하 는 것 은 proxy Table 프 록 시 크로스 필드 입 니 다.이것 은 사용 하기에 비교적 편리 하지만 프로젝트 를 포장 한 후에 이 문제 에 부 딪 혔 습 니 다.
해결 방법 은 다음 과 같다.
config 폴 더 의 index.js 파일 을 열 고 다음 코드 를 추가 합 니 다.

pathRewrite: {
 '^api':'https://*****.com' //         
}

2.개발 환경 주 소 를 설정 합 니 다.config 폴 더 의 dev.env.js 파일 입 니 다.다음 코드 를 추가 합 니 다.

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_HOST:'"/api"' //         
})

3.생산 환경 주 소 를 설정 하 는 것 은 config 폴 더 의 prod.env.js 파일 입 니 다.다음 코드 를 추가 합 니 다.

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 API_HOST:'"https://**********.com/api"' //       
}
})

인터페이스 주소 에 api 라 는 공공 경로 가 없 으 면 추가 하지 마 세 요.
4.이제 구성 요소 에서 사용 해 야 합 니 다.

 methods : {
  getData() {
  let _this = this;
  this.http(this,{
  //process.env.API_HOST        api  
   url : process.env.API_HOST+'/platform/index/new',
   // headersType : 1 //token
  }).then(res=>{
   this.ShowSkeleTon = true;
   this.list = res.list;
  },err=>{
   console.log(err);
  });
  },
 },

그리고 모든 구성 요소 의 url 주 소 를 수정 합 니 다.
귀 찮 지만 이 문 제 를 완벽 하 게 해결 할 수 있다.이렇게 하면 포장 후에 도 데 이 터 를 요청 할 수 있 습 니 다.
추가 지식:vue 프로젝트 배치 후 도 메 인 요청 백 엔 드 실패(해결)
미 해결 전

인증번호 불 러 오 는 데 실 패 했 습 니 다.
해결 후

인증번호 불 러 오기 성공
해결 방법
nginx/conf/nginx.conf 에서 다음 설정 을 합 니 다.

server {
 listen 8080;  #       
 server_name 127.0.0.1; #     ip  
 root /usr/local/nginx/html; #            
 #charset koi8-r;
 #access_log logs/host.access.log main;
 location / {
  # root /usr/local/nginx/html/;
  try_files $uri $uri/ /index.html;
  index index.html index.htm;
 }
 #       
 location /req {
  rewrite ^.+req/?(.*)$ /$1 break;
  proxy_pass http://127.0.0.1; #          
  proxy_redirect off;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
 #       
 location /api {
  proxy_pass http://127.0.0.1:/login; #           
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection ‘upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
 }
 }

주의:이상 에서 두 가지 해결 방법 을 제 공 했 지만 두 번 째 방법 을 모두 사용 할 때 문제 가 발생 할 수 있 습 니 다.
이상 의 vue 프로젝트 를 포장 한 후 요청 주소 오류/포장 후 크로스 오 버 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.