vue+element-统一管理线上线下接口

需求分析

实现思路

代码实现

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

/*module.exports = merge(prodEnv, {
 NODE_ENV: '"development"'
})*/
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',//开发环境
 api_9101 : '"http://47.98.113.173:9101"',  //房价码的线下接口
 api_9102 : '"http://47.98.113.173:9102"',  //会员的线下接口
 api_9519 : '"http://47.98.113.173:9519"',  //登陆的线下接口
});

prod.env.js

'use strict'
/*module.exports = {
 NODE_ENV: '"production"'
}*/
module.exports = {
 NODE_ENV: '"production"',//生产环境
 api_price : '"http://price.crowncrystalhotel.com"',   //房价码的线上接口
 api_member : '"http://member.crowncrystalhotel.com"', //会员的线上接口
 api_9022 :'"http://47.98.113.173:9022"',//登陆的线上接口
};

api.js

/**
* 线下接口
* @type {string}
*/
const api_9519 = process.env.api_9519;  //登陆的线下接口  徐哥的所有的线下接口
const api_9101 = process.env.api_9101;  //房价码的线下接口
const api_9102 = process.env.api_9102;  //会员的线下接口

/**
* 线上接口
* @type {string}
*/

const api_9022 = process.env.api_9022;         //登陆的线上接口   徐哥所有的线下接口
const api_price = process.env.api_price;       //房价码的线上接口
const api_member = process.env.api_member;     //会员的线上接口

export default {
 /**
  * 线上接口
  */
  api_9022_9519 : api_9022,
  api_price_9101 : api_price,
  api_member_9102 : api_member,
  
 /**
  * 线下接口
  */
  /*api_9022_9519 : api_9519,
  api_price_9101 : api_9101,
  api_member_9102 : api_9102,*/
}

main.js

import api from '../config/api'
Vue.prototype.api = api;

引用

handleLogin : function(){
{
        let that = this;
        /**
         * 常规登录  && code.trim().length > 0
         */
        if(that.check_login === 'login_flag'){
          let url =  that.api.api_9022_9519 + '/v1/common/employee/login';
          let username = this.account.username;
          let pwd = this.account.pwd;
          let code = this.account.code;
          if(username.trim().length > 0 && pwd.trim().length > 0){
            this.$axios({
              method: 'post',
              url: url,
              data: {
                code: code,
                user_name: username,
                password: that.getmd5(pwd),
              }
            }).then((res) => {
              console.info(res);
              if(res.data.message === "success") {
                sessionStorage.setItem("root_level",res.data.root_level);
                sessionStorage.setItem("rules",JSON.stringify(res.data.rules));
                localStorage.setItem('access-user', JSON.stringify(res.data.real_name));
                localStorage.setItem('userInfo', JSON.stringify(res.data.user_info));
                that.$router.push({
                  path: '/'
                });
              } else {
                that.$message({
                  message: '登录失败',
                  type: 'warning'
                });
                //this.loading = false;
                //console.info(data.data.message);
                //this.$message.error("登录失败，账号或密码错误");
              }
            }).catch(function(err) {
              that.$message({
                message: '登录失败',
                type: 'warning'
              });
            })
          }
      },
}

return {
url : this.api_9022_9519,
}

那么下面用的就可以直接that.url就可以了。
哪里不明白的可以私信我，或者下方留言，看到了都会回复的，或者关注一下，一起学习！