1. 程式人生 > >Vue設定全域性變數(MD.4)

Vue設定全域性變數(MD.4)

2018-07-19,22:37,今天完善了漫島(瞭解漫島)的登入註冊流程,但這一塊暫時不上線。
調取介面的時候發現在請求的url上要重複寫介面字首“http://xxx.com”,當然不能每次都這麼寫,如果以後介面換成https,或者字首改了,一個個的改起來那估計得頭疼死,於是引出了今天的部落格主題:

Vue專案如何引入全域性變數

方法很多,我就以我的程式碼為例吧,就兩步:
1.在components目錄下新建一個Global.vue檔案,專門用來存放類似的全域性變數,統一存放到這裡方便管理。
這裡寫圖片描述
Global.vue程式碼如下:

<!--全域性變數-->
<script> //線上介面地址 const apiUrl="http://xxxxxx.iscoser.com"; export default{ apiUrl } </script>

2.接著在main.js裡面引入apiUrl,給Vue的原型新增這個屬性。

import apiUrl from './components/Global.vue'
Vue.prototype.apiUrl = apiUrl.apiUrl;

經過以上兩步,在專案裡面的其他頁面就都可以引用到apiurl了,直接使用this.apiUrl

,打印出來就是我們之前在Global.vue檔案裡面定義好的變量了,以後再改的時候改動一下這裡所有的介面都跟著變動了,省心。

昨天熬夜熬得眼冒金星,今天不熬了,喝點肥宅快樂水,吃點肥宅快樂晚餐睡覺的。
這裡寫圖片描述
漫島居民群歡迎任何三觀正的小夥伴進來玩啊,Q群號:581062303,晚安!