import VueResource from 'vue-resource' //用來(lái)請(qǐng)求接口
Vue.use(VueResource)
//開(kāi)啟后請(qǐng)求就會(huì)以application/x-www-form-urlencoded作為MIME type 就像普通的html表單一樣，form形式傳給后臺(tái)，而非JSON
Vue.http.options.emulateJSON = true;

 import Vue from 'vue'
 import VueX from 'vuex'
 import actions from './actions' //這里為了可擴(kuò)展性，所以單獨(dú)創(chuàng)建一個(gè)文件用來(lái)存放請(qǐng)求方法
 Vue.use(VueX);
 //請(qǐng)求之甬道actions所以只導(dǎo)入了actions
 export default new VueX.Store({
  actions
 });

let HostType = 0; //用來(lái)判斷當(dāng)前是什么環(huán)境
let Host = {}; //用來(lái)存儲(chǔ)當(dāng)前環(huán)境的請(qǐng)求ip
if (HostType == 0) {
 Host = { //對(duì)象內(nèi)的字段可以自定義如果整個(gè)項(xiàng)目只有一個(gè)后臺(tái)地址只需要一個(gè)字段就可以；
 api: "127.0.0.1:9000",
 base: "",
 fileUp: ""
 } 
} else if (HostType == 1) {
 Host = {
 ...
 }
} else if (HostType == 2) {
 Host = {
 ...
 }
}
 module.exports = Host;

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

//導(dǎo)入插件
const proxyMiddleware = require("http-proxy-middleware");
//導(dǎo)入代理的配置
const proxyTable = require("./proxy-table");
//拿出配置代理的所有匹配的字段
const proxyContext = Object.keys(proxyTable); // ["/api/text","/api/demo"]

module.exports = () => {
 //創(chuàng)建一個(gè)默認(rèn)的配置對(duì)象
 const defautOptions = {
 changeOrigin: true,
 secure: false
 }
 //為什么return的是一個(gè)async的方法是因?yàn)檎?qǐng)求代理是通過(guò)服務(wù)器進(jìn)行代理的在啟動(dòng)腳本中會(huì)使用koa框架來(lái)注冊(cè)這個(gè)中間件
 return async (ctx, next) => { //ctx和next都是koa框架中間件自帶的參數(shù)
 for (let context of proxyContext) { //循環(huán)我們拿到的keys數(shù)組
  if (ctx.url.startsWith(context)) { //判斷當(dāng)前請(qǐng)求的url中是不是以拿到的keys數(shù)組中的某個(gè)值開(kāi)頭的
   ctx.respond = false; //繞開(kāi)koa框架的內(nèi)置response處理
   let options = proxyTable[context];
  //如果拿取到的直接是IP地址就賦值給配置對(duì)象
   if (typeof options === 'string') {
   options = {
    target: options
   }
   }
   //使用Object.assign()方法合并兩個(gè)對(duì)象
   options = Object.assign({},defautOptions,options);
   //將每一個(gè)代理都注冊(cè),這里必須return一個(gè)自執(zhí)行函數(shù)否則代理不會(huì)設(shè)置成功
   proxyMiddleware(context,options)(ctx.req,ctx.res, next);
  }
 }
 await next();
 }
}

//在腳本文件中導(dǎo)入我們需要的框架和代理配置文件
const Koa = require("koa"); //所用的框架
const proxy = require("./config/proxy-middleware"); //剛才創(chuàng)建的代理配置文件
//創(chuàng)建一個(gè)服務(wù)
const app = new Koa();
//將代理插件注冊(cè)到服務(wù)上
app.use(proxy()); //因?yàn)槲覀儗?dǎo)出的是一個(gè)方法所以需要使用調(diào)用的方式注冊(cè)
//啟動(dòng)服務(wù)
app.listen(9000,() => {
 console.log("server running at http://127.0.0.1:9000");
});
//對(duì)koa框架不是熟悉的可以使用express框架 如果使用express框架拿代理就不用使用前面那樣復(fù)雜的寫(xiě)法了
const express = require("express");
const proxy = require("http-proxy-middleware");
const app = express();
app.use(express.static("dist/"));
app.use("/all", proxy({
 target: "http://127.0.0.1:3000",
 changeOrigin: true,
}))
app.listen(9000, (err) => {
 if (err) return console.log(err);
 console.log("app as running at http://127.0.0.1:9000");
})

//導(dǎo)入Vue
import Vue from "vue"
export default {
 //測(cè)試接口
 testInterface({},postdata) {
  //postdata是你調(diào)用的時(shí)候傳過(guò)來(lái)的參數(shù)可以更具需求拼接接口
  //let ipstr = `/api/text?id=${postdata.id}`;
  //return Vue.http.get(ipstr,{}).then(response => {
  return Vue.http.get("/api/text",{}).then(response => {
  if (response.status == 200) {
   return new Promise(response.body);
  } else {
   return new Promise(response.data.message);
  }
  })
 }
}

<div id="app">
 <button @click="clickF">按鈕</button>
</div> 

methods: {
  clickF() {
   this.testInterface().then(data=> {
    console.log(data);
   })
  },
  ...mapActions(["testInterface"])
 }