vue 실천--- 서로 다른 환경에 따라 자동으로 요청한 URL 주소 변환 작업

일반적인 프로젝트 환경은 로컬 환경, 테스트 환경, 예발 환경, 정식 환경으로 나뉜다.이러한 환경의 도메인 이름은 일반적으로 같다. 전방 요청 인터페이스의 URL도 이러한 환경의 변화에 따라 바뀌고 수동으로 수정하는 것은 좀 번거롭기 때문에 요청한 주소를 도메인 이름에 따라 바꾸도록 방법을 생각해 보자.
첫 번째 단계:
RequestConfig 를 만듭니다.js는 다음과 같은 구성 파일입니다.

const APIMapping = {
 project1: {
  test: 'http://123.com',
  local: 'http://abc.com'
 },
 project2: {
  test: 'http://123.com',
  local: 'http://abc.com'
 }
 }
const currentEnvMapping = {
 '127.0.0.1': 'test',
 'localhost': 'local',
}
export { currentEnvMapping, APIMapping }

여기에는 로컬 환경, 다른 환경 사용 방법과 마찬가지로 테스트 환경만 열거되어 있다.
APIMapping은 모든 프로젝트입니다. 여기에는 프로젝트1, 프로젝트2가 있습니다.각 항목은 로컬 환경(test), 테스트 환경(local)으로 나뉜다.
current EnvMapping은 로컬 환경의 도메인 이름을 사용할지 테스트 환경의 도메인 이름을 사용할지 지정합니다.
두 번째 단계
vuex를 사용하여store 파일을 만들어서 vuex에 저장한 다음 index를 만듭니다.js 저장 데이터:

import Vue from 'vue'
import Vuex from 'vuex'
import { APIMapping, currentEnvMapping } from './../common/RequestConfig.js'

Vue.use(Vuex)
const state = {
　　//  currentEnvMapping[location.hostname] test，  local 
　　// APIMapping['project1'] 
　　// APIMapping['project1'][currentEnvMapping][location.hostname] url　　

 RequestHost: APIMapping['project1'][currentEnvMapping[location.hostname]]
}

const getters = {
 get_RequestHost: state => {
 return state.RequestHost
 }
}

export default new Vuex.Store({
 state,
 getters
})

세 번째 단계
사용할 수 있습니다. 정상적인 vue와 마찬가지로 코드는 다음과 같습니다.

 mounted(){
 console.log(this.$store.getters.get_RequestHost)
 }

구체적인 코드는 여기를 보십시오https://github.com/YalongYan/vue-practice/tree/master/dynamic-request
보충 지식: vue-cli 프로젝트 생산 환경과 개발 환경 요청 인터페이스 설정, 수동 전환 없이 주소 자동 전환 문제
1. dev.env.js 파일에 구성 추가(개발 환경):

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

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

2. prod.env.js 파일에 구성 추가(운영 환경):

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 url_api: '"http://192.168.0.30/server-carApp/"' //  ， ， 
}

3. axios 요청 파일에서process를 통해.env.url_api는 요청한 루트 인터페이스를 얻을 수 있고,
내 요청 파일의 설정:

const service = axios.create({
 baseURL: process.env.url_api, //  process.env.url_api 
 withCredentials: true,
 timeout: 60 * 1000 
})

내가 개발 환경에서 url_를 설정한 이유api의 값은api입니다. 제가 config/index에 있기 때문입니다.js에 설정된 크로스 에이전트는api입니다.
config 아래의 index.js 파일에서 크로스 에이전트 설정

module.exports = {
 dev: {

 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
  '/api': {
  target: 'http://192.168.0.30/server-carApp/', //  
  changeOrigin: true, //  
  // secure: false, //  https ， 
  pathRewrite: {
   '^/api': ''
  }
  }
 },
 。。。。。。

4, 같은, 구체적으로.vue 구성 요소 파일에서도process를 통해 사용할 수 있습니다.env.url_api는 루트api 인터페이스 주소를 가져와서 문자열로 연결하여 원하는 전체 URL 요청 주소를 얻을 수 있습니다.
예를 들어 로그인합니다.vue 파일에 이미지 인증 코드의 주소가 있습니다.

<template>
<img :src="codeImgSrc" alt=" "/>
</template>
<script>
//  ， 
const imgUlr = process.env.url_api + '/main/validate/qrCode?w=300&h=80'
export default {
name: 'Login',
 data() {
 return {
 codeImgSrc: imgUlr,
 }
 }
}
</script>

상기 vue 실천--- 서로 다른 환경에 따라 자동으로 요청한 URL 주소를 바꾸는 작업은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분에게 참고가 되고 저희를 많이 지지해 주시기 바랍니다.