vue配置开发环境和生产环境(axios)

vue-cli版本2.9.6

一 配置开发环境

一般情况下开发环境是会跨域的，所以我们只需要在跨域的位置配置即可。
进入config/index.js，在proxyTable对象里面添加代码，如下图

//方便复制
'/api': {
  target: 'http://10.1.7.144:8082/',   //这里填自己的接口地址
  changeOrigin: true,
  pathRewrite: {
    '^/api': '/'
  }
}

config/index.js

二 配置生产环境

进入config/prod.env.js，添加属性BASE_API为自己的生产环境地址即可，如下图

config/prod.env.js

三 调后台接口的方法(axios)

假设我们要接口的地址是：http://10.1.7.144:8082/mall/userinfo/delete

• 其中http://10.1.7.144:8082/我们已经在一二步骤中配置好了
• /mall是项目的前缀，相当于说每个接口都会有/mall
• /userinfo/delete是具体接口名称(路径)

1. 接着要封装get与post方法，新建一个文件request.js

// request.js
import axios from "axios";
import qs from "qs";

//定义方法
export function post(url, params){
    const basePath=process.env.NODE_ENV=="development" ? "/api/mall" : "/mall";
    return axios.post(basePath+url, qs.stringify(params)); //如果不需要转json的话，那么第二次参数就是params
}
export function get(url,params){
    let basePath=process.env.NODE_ENV=="development" ? "/api/mall" : "/mall";
    return axios.get(basePath+url, { params });
}

2. 为了能在全局使用，在main.js中挂载到全局变量

// main.js
import {get, post} from "./request.js";
Vue.prototype.$get=get;
Vue.prototype.$post=post;

3. 方法调用

//任意文件调用
//使用，以post为例，get一样
this.$post("/userinfo/delete", {
    //这里面是要传的数据
}).then(res=>{
    console.log("成功");
    console.log(res.data);
}).catch(res=>{
    console.log("失败");
    console.log(res);
});