Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本

使用vue init webpack 你的项目名称初始化一个vue的项目

安装依赖

npm install vue-resource http-proxy-middleware vuex koa

在项目的main.js中引入并注册下载的依赖
在main.js中引入vue-resource并注册到vue实例中

import VueResource from 'vue-resource' //用来请求接口
Vue.use(VueResource)
//开启后请求就会以application/x-www-form-urlencoded作为MIME type 就像普通的html表单一样，form形式传给后台，而非JSON
Vue.http.options.emulateJSON = true;

在main.js文件同级创建一个store的文件夹用来存放vuex的文件

在store文件夹中创建一个index.js的文件（vue在查找时会自动查找这个文件）,在文件中创建store实例并导出

 import Vue from 'vue'
 import VueX from 'vuex'
 import actions from './actions' //这里为了可扩展性，所以单独创建一个文件用来存放请求方法
 Vue.use(VueX);
 //请求之甬道actions所以只导入了actions
 export default new VueX.Store({
  actions
 });

在store文件夹中创建一个actions.js的文件用来存放请求方法

配置请求代理

在config文件夹下面创建一个host.js文件用来存放开发、测试、生产的请求地址ip

在文件中你可以根据条件来配置到底是开发还是测试或者是正式环境

let HostType = 0; //用来判断当前是什么环境
let Host = {}; //用来存储当前环境的请求ip
if (HostType == 0) {
 Host = { //对象内的字段可以自定义如果整个项目只有一个后台地址只需要一个字段就可以；
 api: "127.0.0.1:9000",
 base: "",
 fileUp: ""
 }
} else if (HostType == 1) {
 Host = {
 ...
 }
} else if (HostType == 2) {
 Host = {
 ...
 }
}
 module.exports = Host;

在config文件夹下面创建一个proxy-table.js文件用来存放代理的配置

const HOST = require("./HOST.js");
module.exports = {
 //接口代理
 "/api/text": {
 target: HOST.api, //需要代理到那个地址
 changeOrigin: true //是否跨域
 },
 "/api/demo": {
 target: HOST.api,
 changeOrigin: true
 }
}

在config文件夹下面创建一个proxy-middleware.js凭借代理和注册

//导入插件
const proxyMiddleware = require("http-proxy-middleware");								 
 1/3    1 2 3 下一页 尾页