第一步：在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', //數(shù)據(jù)格式 async: false, //設置同步/異步 data: { //所需參數(shù) },}).then(function(response) { console.log(response.data); //打印成功信息}, function(error) { console.log(error); //打印錯誤信息});

補充知識：Vue項目整合接口到同一個配置文件

首先創(chuàng)建一個js文件，我的命名是用api.js。

//數(shù)據(jù)接口的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: { //傳入的參數(shù) a:a } }) .then(res => { //此處要使用箭頭函數(shù)，this指向才正確 console.log(res) }) .catch(function(error) { alert(error); });

以上這篇vue實現(xiàn)把接口單獨存放在一個文件方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。