---
tags: Vue 直播班 - 2021 夏季班
---

# 檢核點 - 第六週

**重點觀念：**
1. 使用 Vue CLI
2. 路由規劃
3. 登入驗證（check API）
4. 建立環境變數

**回覆參考：**

登入驗證正確，確實將驗證不成功的用戶轉回登入頁
路由規劃相當完成，整體操作上都很正確，對於路由觀念掌握度很不錯
整體沒有太大的問題，恭喜過關

---

**資料夾：**

* 因為目前有前後台的 vue 檔案，建議用資料夾來區分檔案，例如：views 底下建立 backend (or dashboard) 資料夾，裡面就都放後台頁面的檔案
* node_modules 不能上傳(誤傳的可以退)

**router/index.js：**

* 一般來說 App.vue 這支檔案不會放除了<router-view/>以外的內容
* 可以練習讓前台也有一個 index 頁面來管理子頁面，如圖：
* 後台的路由不建議跟前台的混用（要分成兩個物件）
* 增加 404 頁面
* 建立 .env 環境，且確實使用 process.env.VUE_APP_ 變數取代自定義的資料
* 表單驗證功能使用 npm 方式載入（可查看 package.json），且可以正常運作

助教新增建議：

* [問題](https://rpg.hexschool.com/admin/task/confirm/index#/task/review/19485)：登入後進入產品列表頁，時常會出現「驗證錯誤，請重新登入」
> 因同學的 Dashboard.vue 在 mounted 階段才會執行 checkLogin()，代表整個頁面的 DOM 都載入完成才會取得 token，在這之前因已產生 router-view，後台的 Products.vue 元件生成後會執行 getProducts() 取得產品資料，但還沒有取到 token ，因此會出現「驗證錯誤」的訊息
可以在 Dashboard.vue `<router-view>` 上加上 v-if 判斷 check 登入狀態，變成 true 才能呈現 router-view

* [問題](https://rpg.hexschool.com/admin/task/confirm/index#/task/review/19485)：已成功登入過後台，回到前台後再次回到後台，還是需要再輸入一次帳號密碼
> 同學的 Home.vue，導覽列的後台登入 router-link 是指向登入頁面，由於登入頁沒有特別做驗證登入狀態轉址的動作，因此登入後，回到前台點擊後台登入還是會停留在登入頁
一般來說登入過後不太會有機會再次進入到後台登入頁面，所以可以登入後把「後台登入」切換成「後台首頁」之類的，或是一開始就使用「後台首頁」的連結，這樣就會經過驗證階段了～

* [問題](https://rpg.hexschool.com/admin/task/confirm/index#/task/review/20679)：部署 Github pages 有問題
Repository Name：
路徑設定：

> 1. 不建議直接使用 valerie300.github.io 當成作品網址（Repository Name），因為將來可能會用來當作部落格，如果用這個當作網址開頭，可能會有問題
> 2. 路徑本身就有設置錯哩，「 實際載入就是 https://valerie300.github.io/valerie300.github.io/dist/js/chunk-vendors.8f0fcf48.js 」，因此正確來講 publicPath 設置錯誤了，應設置成 `publicPath: process.env.NODE_ENV === 'production' ? '/dist' : '/',` 才對
> 3. 否則就是砍掉 vue.config.js 使用 一鍵部署