因為項目測試的需要，我需要給測試人員一個項目的測試環境版本和生產環境版本，兩個版本的區別就是請求的接口地址不一樣而已，一開始，我是在webpack配置了不同的命令，讓測試去打包，比如：使用npm run test?打包測試版本，使用npm?run build打包生產環境的版本，可是測試嫌麻煩，說讓弄成配置文件形式的 ，直接改配置文件就可以改接口地址的那種。

想了一陣子沒想到方法，同事過來看了看說，，把接口地址掛載window全局對象下面不就行了，在同事?的點撥下，瞬間知道該咋做了，，好吧，是我想的太復雜了

簡單的做法：

1.在項目根目錄下的static文件夾下新建一個config.js(因為static文件夾下的東西在執行打包的時候會復制到打包后的目錄里)，在里邊寫：

window.serverAPI={

url:"http://www.xxx.com",

timeout:5000

}

2.在入口index.html?里?引入config.js

3.在項目中配置axios就可以這樣：

let http = axios.create({

baseURL: window.serverAPI.url,

timeout: window.serverAPI.timeout

});

然后?測試?拿去用的話?就可以自己去改config.js里的url?來改接口地址啦

第二種方法(推薦)(20190530更新):

將接口配置成json? 并將api.json文件放在static文件夾下:

{

"onlineServer": {

"enabled": "true",

"name": "onlineServer",

"api": "http://www.xxx.com"

},

"testServer": {

"enabled": "false",

"name": "testServer",

"api": "http://xxx.xxx.xx.xx"

}

}

上方是我定義的格式 ,onlineServer是線上接口的配置,testServer是測試服務器的配置,程序里邊 通過enabled屬性來判斷使用哪個配置.

在vue入口文件 (一般就是main.js),先去獲取 api.json ,獲取到后再去實例化Vue,代碼如下:

const loadApiConfig = new Promise((resolve, reject) => {

let o = require('../static/api.json');

if (o){

resolve(o);

}else {

reject("api獲取失敗")

}

});

loadApiConfig.then(res=>{

let apiConfig = {};

for (let p in res) {

if (res.hasOwnProperty(p)) {

//判斷 enabled 是true 就使用這個配置

if (res[p].enabled === "true") {

apiConfig = res[p];

}

}

}

console.log(apiConfig);

console.log("獲取api成功");

//創建一個axios實例 配置剛剛獲取的到api 地址等 參數 并掛載到Vue原型鏈上 在組件中就可以 用this.$http 去請求數據了

Vue.prototype.$http = axios.create({

baseURL: apiConfig.api,

timeout: apiConfig.timeout,

headers: {

"Content-Type": "application/json"

}

});

// 實例化vue

new Vue({

el: '#app',

router,

components: {App},

template: ''

});

}).catch(e =>{

console.error(e)

})

3+

1.如需轉載本站原創文章，請務必注明文章出處并附上鏈接，非常感謝。

2.本站用于記錄個人 工作、學習、生活，非商業網站，更多信息請 點擊這里

“vue項目打包后可以配置接口地址的方法” 有 2 條評論

我的config/index.js里面有一個地址，那個地方需不需要進行修改

0

什么地址,,,

0

發表評論電子郵件地址不會被公開。

評論

姓名

電子郵件

站點

總結

以上是生活随笔為你收集整理的vue项目接口地址暴露_vue项目打包后可以配置接口地址的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。