zoukankan      html  css  js  c++  java
  • 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
      })
    }
  • 相关阅读:
    python自动化测试学习路线-python设计语言sys模块argv参数用法
    python自动化测试学习路线-python设计语言serial模块调用方法
    【考研复习】线性代数矩阵部分-题解
    【考研复习
    Windows提权
    Hash算法——加密解密说明
    AES 加密算法的原理详解
    sqlmap常用命令
    curl的使用
    DOM XSS详解
  • 原文地址:https://www.cnblogs.com/CinderellaStory/p/12850650.html
Copyright © 2011-2022 走看看