第一步：在src/router目錄下，建立一個js檔案（檔名：httpConfig.js）；

第二步：在httpConfig.js檔案裡面寫上

const aa = 'http://192.168.1.123';//本地測試
const config = {
 bb: aa+ '/article/articleListPage',//所需的介面
 
}
//需要讓外部拿到
export default config;

第三步：掉介面

_this.$http({
 url: _this.$httpConfig.bb,//介面地址
 method: 'POST',//請求方式
 contentType: "application/json;",//內容型別
 headers: {
  'Content-Type': 'application/json' //請求頭
 },dataType: "json",//資料格式
 async: false,//設定同步/非同步
 data: {
           //所需引數
 },}).then(function(response) {
 console.log(response.data);   //列印成功資訊
},function(error) {
 console.log(error);     //列印錯誤資訊
});

補充知識：Vue專案整合介面到同一個配置檔案

首先建立一個js檔案，我的命名是用api.js。

//資料介面的ip和埠
const ip = 'http://192.168.101.127:8080';



const zymllist = ip+'/hg6000/dsjjm/zymllist.do';
const wsqk = ip+'/hg6000/dsjjm/wssj.do';
const fdcqk1 = ip+'/hg6000/dsjjm/fdcqkZ.do';
const fdcqk2 = ip+'/hg6000/dsjjm/fdcqkB.do?sbno=2018-09&xzqhbm=420000&xzqhjb=2';
const sq = ip+'/hg6000/dsjjm/hbssq.do'

//一定要註冊才可以使用
export default {
  zymllist: zymllist,wsqk: wsqk,fdcqk1:fdcqk1,fdcqk2:fdcqk2,sq:sq,}

在其他 .vue 檔案內，如需呼叫api.js內的介面，需要先引用：

import api from "common/js/api";

引用完成後，使用如下：

this.axios
    .get(api.sq,{  //api.sq 為 api.js 資料夾中，名稱為 sq 的介面路徑
     params: {  //傳入的引數
      a:a 
     }
    })
    .then(res => { //此處要使用箭頭函式，this指向才正確
      console.log(res)
    })
    .catch(function(error) {
     alert(error);
    });

以上這篇vue實現把介面單獨存放在一個檔案方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。