第一步：在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實現把接口單獨存放在一個文件方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。