vue项目接口地址暴露_vue项目打包后可以配置接口地址的方法
因為項目測試的需要，我需要給測試人員一個項目的測試環境版本和生產環境版本，兩個版本的區別就是請求的接口地址不一樣而已，一開始，我是在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项目打包后可以配置接口地址的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 蓝湖怎么切图标注_【蓝湖指北】你真的会切
- 下一篇： 1970 matla 时间_关于matl