vue项目根据不同环境动态配置接口

首先，在公共请求接口的地方src/api/common.js

// 公共配置接口域名接口
export function configApi(data) {
  return request({
    url: '配置接口',
    method: 'post',
    data
  })
}

 

然后，main.js引用和使用

import { configApi } from './api/commonApi' // 引入公共接口

// 请求公共配置域名接口
var params = {
  'app_secret': 'BC3.342.78',
  'appid': 'BC100'
}
configApi(params)
  .then(response => {
    var data = response.result
    if (process.env.EVN_CONFIG === 'prod' && process.env.NODE_ENV === 'production') {
      // 正式环境
      Vue.prototype.baseConfig = data[0]
    } else if (process.env.EVN_CONFIG === 'test' && process.env.NODE_ENV === 'test') {
      // 测试环境
      Vue.prototype.baseConfig = data[1]
    } else {
      // 开发环境
      Vue.prototype.baseConfig = data[2]
    }
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
  })
  .catch((error) => {
    console.log(error.result)
  })

 最后，前端请求后台接口时

import request from '../../config/axios'
import Vue from 'vue'
const basetConfig = Vue.prototype.baseConfig
// 查询合同信息
export function queryContractInfoProc(data) {
  return request({
    url: basetConfig.genexusUrl + '后台接口',
    method: 'post',
    data
  })
}