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是所有的项目，这里有 project1，project2 ；每个项目分为本地环境（test），测试环境（local）;

currentEnvMapping 指明什么域名下使用本地环境的域名，还是测试环境的域名。

第二步

使用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)

  }

巴特西

vue实践---根据不同环境，自动转换请求的url地址

第一步：

第二步

第三步

具体的代码看这里:https://github.com/YalongYan/vue-practice/tree/master/dynamic-request

vue实践系列请看这里：https://github.com/YalongYan/vue-practice

最新文章

热门文章