vue.js - vue项目如何设置接口

问题描述

问 题

这是vue-resource请求数据的接口代码，

我想在开发环境用的是http://localhost:8080/api/test
在生产环境用：
http://xxx.com/api/test
能不能详细说一下要怎么做？有demo更好。
感谢~~

解决方案

我的建议用一个文件（比如：http_url.js），记录所有接口。

let localhostDev = true;
//如果是本地开发，就把localhostDev 设置成true，连接就是拼成‘http://localhost:8080/api/test’
//生产环境，就把localhostDev 设置成false，连接就是拼成‘http://xxx.com/api/test’
let _host= localhostDev ? 'http://localhost:8080' : 'http://xxx.com';
let httpUrl = {
    'test': _host + '/api/test',
    'test1': _host + '/api/test1'
};
export {httpUrl}

开发文件引入接口文件（http_url.js）

import {httpUrl} from 'xxx/http_url';

然后再写就好，上线了，就改localhostDev；

this.$http.get(httpUrl.test).then()

如果要在一个文件那里写，就更简单了，但是文件一多，代码就显得重复，改localhostDev 也是所有文件都要改。不建议

let localhostDev = true;
//如果是本地开发，就把localhostDev 设置成true，连接就是拼成‘http://localhost:8080/api/test’
//生产环境，就把localhostDev 设置成false，连接就是拼成‘http://xxx.com/api/test’
let _host= localhostDev ? 'http://localhost:8080' : 'http://xxx.com';
let httpUrl = {
    'test': _host + '/api/test',
    'test1': _host + '/api/test1'
};

然后在操作函数里面

this.$http.get(httpUrl.test).then()

这篇关于vue.js - vue项目如何设置接口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！