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

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

1 // 公共配置接口域名接口
2 export function configApi(data) {
3   return request({
4     url: '配置接口',
5     method: 'post',
6     data
7   })
8 }

然后，main.js引用和使用

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

 1 // 请求公共配置域名接口
 2 var params = {
 3   'app_secret': 'BC3.342.78',
 4   'appid': 'BC100'
 5 }
 6 configApi(params)
 7   .then(response => {
 8     var data = response.result
 9     if (process.env.EVN_CONFIG === 'prod' && process.env.NODE_ENV === 'production') {
10       // 正式环境
11       Vue.prototype.baseConfig = data[0]
12     } else if (process.env.EVN_CONFIG === 'test' && process.env.NODE_ENV === 'test') {
13       // 测试环境
14       Vue.prototype.baseConfig = data[1]
15     } else {
16       // 开发环境
17       Vue.prototype.baseConfig = data[2]
18     }
19     new Vue({
20       el: '#app',
21       router,
22       components: { App },
23       template: '<App/>'
24     })
25   })
26   .catch((error) => {
27     console.log(error.result)
28   })

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

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