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
  })
}