vue-admin 詳細註釋，必須手把手作項目系列之（三）丟到服務器中解決報錯

系列文章

• [juejin.im/post/5c0e45…]vue-admin 詳細註釋，必須手把手作項目系列之（一）

• [juejin.im/post/5c1609… vue-admin 詳細註釋，必須手把手作項目系列之（二）

• 麻雀雖小五臟俱全：[項目地址 github.com/whylisa/vue…)

前言

• 系列三將會把咱們寫好的項目放到服務器中，模擬和後臺對接的場景
• 咱們將會放到phpstudy中，簡單易懂。下載連接：[phpstudy.php.cn/]
• 系列三中咱們會來看看放到服務器中，會有哪些問題，而後解決它。

phpstudy的使用

• 下載解壓以後，咱們要找到www目錄，把咱們打包的vue文件放入www目錄下

  

• 而後咱們啓動phpstudy,你會看到以下界面

• 啓動成功的界面

  

各類報錯

• 而後咱們在瀏覽器中輸入localhost/dist以後會報錯，路徑錯誤，找不到css/js文件

  

• 是由於咱們在用webpack打包時在，config/index.js文件中，配置的assetsPublicPath: '/',這是默認配置，
• 咱們只須要修改爲assetsPublicPath: './',就能夠了

  

• 修改以後，咱們從新輸入localhost/dist，就能夠正常訪問了

  

• 而後咱們點擊登陸，發現沒有反應，控制檯報錯，報錯以下：

  

• 從報錯信息看，咱們沒有起接口服務，而後咱們起接口服務： [圖片]

  

• 上圖的報錯信息圖片報404是樓主的項目login頁面的一張圖片，在這裏作演示。咱們能夠在控制檯中看到，圖片路徑，和接口都不對。
  • 圖片的錯誤是phpstudy在訪問地址時，默認的訪問localhost/static/-----而咱們static是dist 目錄下的，因此要加dist。
  • 樓主這裏修改的就比較簡單粗暴了，咱們在「圖片一中」直接在phpstudy中的「其餘選項菜單」中，選擇「phpStudy設置」中的「端口常規設置」中的「網站目錄」中加了一個 dist,這樣就解決這個問題了，（ps:這裏只作模擬演示，碰到這種狀況咱們就會去針對處理，而不是摸不着頭腦）
  • 咱們在「圖片二」中，不使用本地代理，由於官方文檔中proxyTable{},只在開發環境中能夠用，這時候咱們直接換成咱們所有的接口地址，這樣解決了這個問題，就能夠正常登錄了。同時，咱們在main.js中能夠配置axios的攔截器，簡化咱們寫這麼長的url地址。（詳情見系列一，二）這裏「貼一段代碼示例」
• 圖片一：

  

• 圖片二：

  

• 貼一段代碼示例

// 把axios對象綁定到Vue原型中
Vue.prototype.axios = axios

// 給axios配置攔截器

// 添加請求攔截器,攔截器的做用：
// 在攔截器中能夠獲取到axios的配置，在config中修改東西
axios.interceptors.request.use(function (config) {
  // 在發送請求以前作些什麼
  // console.log('哈哈，我攔截到了請求', config)
  // 只須要給config配置baseURL 以及 headers
  config.baseURL = 'http://localhost:8888/'
  config.headers.Authorization = localStorage.getItem('myToken')
  return config
}, function (error) {
  // 對請求錯誤作些什麼
  return Promise.reject(error)
})
// 配置axios的經過配置
// axios.defaults.baseURL = 'http://localhost:3000/login'
// axios.defaults.headers.common['Authorization'] = localStorage.getItem('myToken')
複製代碼

• 這樣咱們就能夠愉快地簡化咱們，請求的url地址了，以下：

// 發送axios請求
          const res = await this.axios({
            method: 'post',
            url: 'login',//直接寫login而不用寫http://localhost:8888/login了，由於咱們配置了baseURL
            data: this.form
          })
複製代碼

結語

• 樓主原本想用php寫接口，奈什麼時候間有點忙，只能等後續了。。。。
• 這個模板項目的頁面不是不少，咱們把基礎架構搞懂以後，其實後面就是板磚了，不管是響應式，仍是加上一些特效，或使用h5,c3等等，這個就看項目需求了，你會了1，後面的0你就有譜了，那得你本身加油了。
• 同時，項目優化中，咱們能夠作一些axios封裝，組件的各類抽離等等的優化，這些本身百度下子，由於別人寫的很不錯。多查查，多看看，總會有收穫，學習莫慌，多讀書，
• 後續樓主，會寫react,小程序，一些js的數據結構與算法中經典的詳解