nuxt+axios 포장 후 요청 주 소 를 동적 으로 수정 하 는 방법

수요:포장 후 동적 으로 수정 할 수 있 도록 요청 주소 등 일부 설정 을 노출 합 니 다.다시 포장 하고 컴 파일 할 필요 가 없습니다.
이것 도 좋 습 니 다.한 프로젝트 가 몇 개의 서로 다른 서버 에 배치 되 어야 할 때 매번 수정 한 후에 다시 포장 해 야 한 다 는 것 은 말 할 필요 가 없습니다.기능 이 변 하지 않 을 때 요청 주 소 를 수정 하 는 것 만으로 도 많은 시간 을 절약 할 수 있다.
1.시작
동적 수정 이 필요 한 설정 을 json 파일 에 쓰 십시오.이 프로필 은 static 디 렉 터 리 에 놓 을 수 있 습 니 다:
정적 파일 디 렉 터 리:정적 파일 디 렉 터 리 static 는 정적 파일 을 저장 하 는 데 사 용 됩 니 다.이 파일 은 Nuxt.js 에서 Webpack 을 호출 하여 컴 파일 처 리 를 하지 않 습 니 다.서버 가 시 작 될 때 이 디 렉 터 리 의 파일 은 응용 루트/아래 에 매 핑 됩 니 다.
2.실현
static 에서 baseConfig.json 파일 을 새로 만 들 고 노출 할 설정 을 적어 서 코드 를 먼저 올 립 니 다.

{
 "video_dir": "video/",
 "base_host": "http://xxxxx"
 "request_prefix":'/api/'
}

필요 한 확장 프로필(쓰 고 싶 은 대로 쓰 고 즐 거우 면 됩 니 다~),예 를 들 어 사용 하지 않 는 환경(개발,생산)에 따라 전환 할 수 있 습 니 다.
plugis 폴 더 아래 에 baseConfig.js 파일 을 새로 만 듭 니 다:

import Vue from 'vue';
import axios from 'axios';

const protocolTmp = window.location.protocol; //      URL    
const { host } = window.location; //     host

<!--      -->
async function getServerConfig() {
 return new Promise(async (resolve, reject) => {
  await axios.get(`${protocolTmp}//${host}/baseConfig.json`).then((result) => {
   const { base_host,video_dir ,request_prefix} = result.data;
   //      Vue   ，    
   Vue.prototype.$base_host = base_host;
   Vue.prototype.$request_prefix = request_prefix;
   Vue.prototype.$video_dir = video_dir;
   resolve();
  }).catch((error) => {
   console.log('error', error);
   reject();
  });
 });
}
getServerConfig();

프로젝트 프로필 nuxt.config.js 에 도입:

plugins: [
  ...
  '~/plugins/pathConfig'
 ],

마지막 으로 axios 에 사용 설정,완료.axios.js :

import Qs from "qs"
import Vue from 'vue';

export default function (e) {
 // e.$axios.defaults.baseURL = 'http://xxxxxxx/api/'
 // e.$axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
   e.$axios.defaults.baseURL = Vue.prototype.$base_host + Vue.prototype.$request_prefix
 
 // request interceptor
 e.$axios.interceptors.request.use(
  config => {
   // do something before request is sent
   if (config.method == 'post') {
    config.data = Qs.stringify(config.data)
   }
   return config
  },
  error => {
   // do something with request error
   return Promise.reject(error)
  }
 )
 // response interceptor
 e.$axios.interceptors.response.use(
  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
   const res = response.data
   if (response.status === 200 && res.code == 1000) {
    return res
   } else {
    // redirect('/404')
    // if the custom code is not 200, it is judged as an error.
   }
   return Promise.reject({ code: res.code, msg: res.msg || 'Error' })
  },
  error => {
   console.log('err' + error) // for debug

   return Promise.reject(error)
  }
 )

 e.$axios.onError(error => {
  const code = parseInt(error.response && error.response.status)
  if (code === 400) {
   // redirect('/400')
   console.log('$axios.onError :', error)
  }
 })
}

3.마지막
이 글 은 nuxt+axios 가 포장 을 실현 한 후 요청 주 소 를 동적 으로 수정 하 는 방법 에 관 한 글 을 소개 합 니 다.더 많은 관련 nuxt+axios 포장 후 동적 으로 요청 주소 내용 을 수정 하 는 것 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!