閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

• 題目：三十天用Vue.jS打造一個網路商城

• 挑戰內容：利用慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」＆六角學院的「Vue出一個電商網站」的課程嘗試在30天內打造網路商城。

• 本篇性質：純粹學習進度的紀錄，不會有詳細的教學或解釋，因此不適合認真閱讀

▌為什麼要設定config?

• 一般來說，api大概長這樣伺服器/api/私人API_name/products（如下）

https://vue-course-api.nissen.io/api/nissen/products

• 但是伺服器跟私人API_name是會改變的，因此可以分開寫在config-dev.env.js會比較方便

▌ 設定config-dev.env.js檔案

• 如果是正式環境，要設定在prod.env.js檔案當中
• 注意的坑：如果api的變數是從config來，並且有改過config中的，那一定要重啟npm run dev，不然會讀不到config的api

### Config-dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  APIPATH: '"https://vue-course-api.nissen.io"',
  CUSTOMPATH: '"nissen"',
})

▌ 取用config中的API變數

• 使用process.dev引用在config儲存的變數
• 可以用${變數}引用變數
• 注意：外面是用```符號，而不適用'或是"

const api = `${process.env.APIPATH}/api/${process.env.CUSTOMPATH}/products`;