nuxt.js 서버 렌 더 링 중 axios 와 proxy 에이전트 의 설정 작업

npm axios 가 필요 하 십 니까?
처음에 저 는 일반적인 vue SPA 개발 처럼 npm axios 가 필요 하 다 고 생각 했 습 니 다.이런 방식 은 확실히 효력 이 발생 할 수 있 습 니 다.사용 시 불편 합 니 다.특히 프 록 시 설정 이 번 거 롭 고 asyncData 에 서 는 일반 methods 에서 사용 하 는 방식 과 다르다.
나중에nuxt 의 github에서 nuxt 가 기본적으로 axios 를 통합 한 것 을 발 견 했 기 때문에 npm axios 가 필요 하지 않 지만 적당 한 설정 이 필요 합 니 다.
이상 은 바 이 두 에서 도 착 했 습 니 다.자꾸 오 류 를 보고 하 는 것 을 발 견 했 습 니 다.현재 인터넷 의 튜 토리 얼 은 완전히 헛소리 입 니 다.npm axios 는 설치 할 필요 가 없 지만@nuxtjs/axios 는 설치 해 야 합 니 다.
첫 번 째 단계:
npm 설치@nuxtjs/axios,파일 루트 디 렉 터 리 에 설치,명령 은 다음 과 같 습 니 다.
npm install @nuxtjs/axios
두 번 째 단계:
nuxt.config.js 파일 에 axios 와 proxy 에이 전 트 를 설정 하려 면 다음 과 같 습 니 다.

복사 할 수 있 게~~~

import pkg from './package' 
export default {
 mode: 'universal',
 
 /*
 ** Headers of the page
 */
 head: {
  title: pkg.name,
  meta: [
   { charset: 'utf-8' },
   { name: 'viewport', content: 'width=device-width, initial-scale=1' },
   { hid: 'description', name: 'description', content: pkg.description }
  ],
  link: [
   { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ]
 },
 
 /*
 ** Customize the progress-bar color
 */
 loading: { color: '#fff' },
 
 /*
 ** Global CSS
 */
 css: [
  'iview/dist/styles/iview.css'
 ],
 
 /*
 ** Plugins to load before mounting the App
 */
 plugins: [
  '@/plugins/iview'
 ],
 
 /*
 ** Nuxt.js modules
 */
 modules: [
  '@nuxtjs/axios'
 ],
 
 axios: {
  proxy: true, //       
  prefix: '/api', //      url     /api
  credentials: true //                
 },
 
 proxy: {
  '/api': { 
   target: 'https://www.apiopen.top', //       
   pathRewrite: {
    '^/api': '/', //   /api     /
    changeOrigin: true //       
   }  
  }
 },
 
 /*
 ** Build configuration
 */
 build: {
  /*
  ** You can extend webpack config here
  */
  extend(config, ctx) {
  },
  vendor: ['axios'] //        
 }
}

세 번 째 단계:
구성 요소 에서 사용

<template>
 <div>my</div>
</template>
<script>
export default {
 created () {
  this.allList()
 },
 methods: {
  allList () {
   this.$axios.post(`/novelSearchApi?name=    `).then(res => {
    console.log(res)
   })
  }
 }
 
}
</script>
<style scoped>
</style>

보충 지식:nuxt.js 배치 BASEURL(기본 도 메 인 이름)과 NODEENV(환경 변수)
개발 환경 과 생산 환경의 데이터 인터페이스 도 메 인 이름 이 다 르 기 때문에 항상 저 를 괴 롭 혔 습 니 다.
매번 테스트 패키지 나 온라인 패 키 지 를 칠 때마다 나 는 수 동 으로 도 메 인 이름 을 바 꿔 야 한다.나 는 많은 사람들의 방법 이 이것 과 차이 가 많 지 않다 고 믿는다.아래 와 같다.

(당신 은 이미 이 파일 이 나 에 게 무정 하 게 삭제 되 었 다 는 것 을 알 고 있 습 니 다.왜냐하면 나 는 나 만 의 신대륙 을 발 견 했 기 때 문 입 니 다)
포장 할 때마다 주석 을 바 꿔 야 합 니 다.받 아들 일 수 있 지만 잊 어 버 리 거나 오류 가 발생 하거나 이 프로필 을 찾 으 려 면 반나절 을 찾 아야 합 니 다.
나 같은 반응 이 둔 하고 머리 가 자주 짧 은 사람 에 게 는 너무 고통스럽다.
통 증 이 있 으 면 해결책 을 찾 아야 한다.
첫 번 째 단계:cross-env 설치(이 미니 패 키 지 는 환경 변 수 를 설정 하 는 scripts 를 제공 할 수 있 습 니 다)
npm i cross-env -D
STEP 2:BASE 설정URL 과 NODEENV
우리 패키지 제 이 슨 있 잖 아.안에 스 크 립 트 대상 있 지 않 아?

// package.json
{
 "scripts": {
  "dev": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=development nuxt",
  "start": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=production nuxt start",
  "build": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt build",
  "test": "cross-env BASE_URL=https://test.17wawawa.com NODE_ENV=production nuxt generate",
  "generate": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt generate"
 },
}

cross-env 를 먼저 쓰 고 BASE 를 설정 합 니 다.URL 과 NODEENV，
cross-env 는 플랫폼 을 넘 어 환경 변 수 를 설정 하고 사용 할 수 있 기 때문에 우 리 는 서로 다른 명령(npm run xxx)을 수행 할 때 해당 하 는 BASE 를 설정 합 니 다.URL(기본 도 메 인 이름)과 NODEENV(환경 변수)
명령 은 반드시 끝 에 써 야 합 니 다.예 를 들 어 제 위의 nuxt,nuxt start,nuxt build 등 입 니 다.그렇지 않 으 면 npm run 에서 오 류 를 보고 할 수 있 습 니 다.
다른 명령 을 수행 하면 자동 으로 다른 BASE 를 설정 합 니 다.URL 과 NODEENV
npm run dev // BASE_URL=https://devpc.17wawawa.com NODE_ENV=development
npm run test // BASE_URL=https://test.17wawawa.com NODE_ENV=production
npm run generate // BASE_URL=https://www.17wawawa.com NODE_ENV=production
내 위 에 있 는 이 코드 를 직접 복사 하지 마 세 요.항목 마다 BASEURL 은 일반적으로 다 릅 니 다.프로젝트 의 인터페이스 로 도 메 인 이름 을 요청 해 야 합 니 다.
세 번 째 단계:nuxt.config.js 설정
package.json 의 scripts 설정 이 완료 되면 nuxt.config.js 에 가서 env,공식 문 서 를 설정 해 야 합 니 다.

// nuxt.config.js
module.exports = {
 mode: 'universal',
 env: {
  BASE_URL: process.env.BASE_URL,
  NODE_ENV: process.env.NODE_ENV
 }
}

STEP 4:어떻게 사용 하나
사용 은 가장 간단 합 니 다.process.env.BASE 를 직접 씁 니 다.URL 을 사용 하면 됩 니 다.예 를 들 어 우리 axios 프로필 에서 process.env.BASE 를 사용 합 니 다.URL

혹은 임의의 페이지 에서 console.log(process.env.BASEURL)은 모두 인쇄 할 수 있다
이후 서로 다른 포장 명령 만 수행 하면 BASE 를 자동 으로 설정 할 수 있 습 니 다.URL 과 NODEENV 입 니 다.잦 은 주석 과 취소,멋 지게 if..else 를 삭제 합 니 다.baseUrl 파일 을 설정 하 세 요!
이상 의 nuxt.js 서버 렌 더 링 에서 axios 와 proxy 에이전트 의 설정 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.