vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯

前端_小牛_到犀牛發表於2018-12-19
Vue伺服器

系列文章

前言

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

phpstudy的使用

  • 下載解壓之後，我們要找到www目錄，把我們打包的vue檔案放入www目錄下
    vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯
  • 然後我們啟動phpstudy,你會看到如下介面

vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯

  • 啟動成功的介面
    vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯

各種報錯

  • 然後我們在瀏覽器中輸入localhost/dist之後會報錯，路徑錯誤，找不到css/js檔案
    vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯
  • 是因為我們在用webpack打包時在，config/index.js檔案中，配置的assetsPublicPath: '/',這是預設配置，
  • 我們只需要修改成assetsPublicPath: './',就可以了
    vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯
  • 修改之後，我們重新輸入localhost/dist，就可以正常訪問了
    vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯
  • 然後我們點選登入，發現沒有反應，控制檯報錯，報錯如下：
    vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯
  • 從報錯資訊看，我們沒有起介面服務，然後我們起介面服務： [圖片]
    vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯
  • 上圖的報錯資訊圖片報404是樓主的專案login頁面的一張圖片，在這裡做演示。我們可以在控制檯中看到，圖片路徑，和介面都不對。
    • 圖片的錯誤是phpstudy在訪問地址時，預設的訪問localhost/static/-----而我們static是dist 目錄下的，所以要加dist。
    • 樓主這裡修改的就比較簡單粗暴了，我們在“圖片一中”直接在phpstudy中的“其他選項選單”中，選擇“phpStudy設定”中的“埠常規設定”中的“網站目錄”中加了一個 dist,這樣就解決這個問題了，（ps:這裡只做模擬演示，碰到這種情況我們就會去針對處理，而不是摸不著頭腦）
    • 我們在“圖片二”中，不使用本地代理，因為官方文件中proxyTable{},只在開發環境中可以用，這時候我們直接換成我們全部的介面地址，這樣解決了這個問題，就可以正常登陸了。同時，我們在main.js中可以配置axios的攔截器，簡化我們寫這麼長的url地址。（詳情見系列一，二）這裡“貼一段程式碼示例”
  • 圖片一：
    vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯
  • 圖片二：
    vue-admin 詳細註釋，必須手把手做專案系列之（三）丟到伺服器中解決報錯
  • 貼一段程式碼示例

// 把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的資料結構與演算法中經典的詳解

相關文章