Vue.js 電商練習技術整理 -- 接取API與設定環境變數

文章目的

最近開始利用 Vue.js 實戰練習電商網站的開發，想藉由一系列的文章，來整理相關的重點技術。
本篇重點為利用 Vue Cli 接取 API 並且將 API 設定為環境變數。

環境檔案介紹

一般來講，安裝完 Vue Cli 後，打開 config 資料夾，會看到裡面有3個環境設定檔。
分別是：

• index.js – 針對整個環境進行編譯
• dev.env.js – 開發中的環境變數
• prod.env.js – 正式的環境變數

那為什麼要特別分成開發中與正式版本呢？
因為往往在開發時接取的 API 路徑會與 正式版本不同，因此我們可以透過兩個檔案分開各自定義環境變數，以方便操作。

Vue axios 安裝

既然我們本次的重點是要接取 API，這邊提供一個接取 API 的套件 — Vue axios
安裝與設置方面這邊就不多加敘述，連結的官方文件上都有說明。

接取 API

有了 Vue axios 後我們就可以開始接取 API。
我們來到 App.vue，設定 created 時將 API 資料抓進來，程式碼如下：

<script>
export default {
  name: 'App',
  created () {
    const api = '輸入你的API網址'
    this.$http.get(api).then((response) => {
      console.log(response.data)
    })
  }
}
</script>

將 API 網址設定成環境變數

用了上述方法接取 API 我們無法靈活的運用它，且無法讓它在開發環境與正式環境做區分。
因此現在我們要將 API 網址設定成環境變數，並透過呼叫變數來使用它(本次範例設定在開發環境)。

1. 我們來到 config 資料夾底下的 dev.env.js，宣告新的環境變數定義我們的 API 路徑，以下是程式碼：

   module.exports = merge(prodEnv, {
     NODE_ENV: '"development"',
     APIPATH: '"你的 API 路徑"',  //變數名稱可自己定義，一般來說都是用大寫英文命名
   })

這邊有一點要注意，宣告的變數在插入路徑時，記得要再用一次引號包覆路徑。
2. 定義完環境變數後，我們回到 App.vue，將我們剛剛的路徑改成用環境變數，程式碼如下：

<script>
export default {
  name: 'App',
  created () {
    const api = `${process.env.APIPATH}`
    this.$http.get(api).then((response) => {
      console.log(response.data)
    })
  }
}
</script>

呼叫環境變數的方法：process.env.環境變數。

---

參考資料

六角學院課程–Vue 出一個電商網站