vue Practice Automatically translate requested url address operations according to different environments

The general project environment is divided into: local environment, test environment, advance environment and formal environment. The domain name of these environments is like 1, and the url of the front-end request interface will change with the changes of these environments. It is a bit troublesome to modify manually, so think of a way to change the requested address according to the change of domain name.

Step 1:

Create 1 RequestConfig. js as a configuration file, as follows:

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 }

Here, only the test environment, local environment and other environment use methods are listed.

APIMapping is all the projects, here are project1, project2; Each project is divided into local environment (test) and test environment (local).

currentEnvMapping indicates which domain name is used under the domain name of the local environment or the domain name of the test environment.

Step 2

Using vuex, establish an store file to store vuex, and then establish index. js to store data:

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

Vue.use(Vuex)
const state = {
 　　 //  Here currentEnvMapping[location.hostname] Determine it is test ,   Or local Environment 
 　　 // APIMapping['project1'] Determine which project it is 
 　　 // APIMapping['project1'][currentEnvMapping][location.hostname] It was finally determined url 　　 

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

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

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

Step 3

You can use it, just like the normal vue1, with the following code:

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

See the specific code here: https://github.com/YalongYan/vue-practice/tree/master/dynamic-request

Supplementary knowledge: vue-cli project production environment and development environment request interface configuration, no manual switching, automatic switching address problem

1. Add configuration (development environment) in the dev. env. js file:

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

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 url_api: '"api"' //  The added request interface and key value can be customized. 
})

2. Add configuration (production environment) in the prod. env. js file:

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 url_api: '"http://192.168.0.30/server-carApp/"' //  Add key-value pairs, key development and build environments to maintain 1 To, the value is the address of the online after packaging 
}

3. In the axios request file, the requested root interface can be obtained through process.env.url_api.

Settings in my request file:

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

I configured the value of url_api to api in my development environment because the cross-domain proxy I configured in config/index. js wrote api,

Configuration of cross-domain proxy in index. js file under config

module.exports = {
 dev: {

 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
  '/api': {
  target: 'http://192.168.0.30/server-carApp/', //  Background interface 
  changeOrigin: true, //  Do you want to turn on cross-domain 
  // secure: false, //  If it is https Interface, you need to configure this 
  pathRewrite: {
   '^/api': ''
  }
  }
 },
  . . . . . . 

4. Similarly, in the specific. vue component file, you can also get the root api interface address through process. env. url_api, and then you can use string splicing to get the desired complete url request address.

For example, in the login. vue file, there is an address for a picture verification code,

<template>
<img :src="codeImgSrc" alt=" Picture verification code "/>
</template>
<script>
//  So the root path is introduced, and it is not necessary to change the resource path in the specific file when packaging and going online 
const imgUlr = process.env.url_api + '/main/validate/qrCode?w=300&h=80'
export default {
name: 'Login',
 data() {
 return {
 codeImgSrc: imgUlr,
 }
 }
}
</script>