技術標籤：vue

目錄結構

vue.config.js配置

在新建vue專案的根目錄下建立vue.config.js檔案
修改配置後必須重啟服務,才能生效

// 修改配置後必須重啟服務,才能生效
module.exports = {
// webpack-dev-server 相關配置
  devServer: {
  // 自動開啟瀏覽器
    open: true,
    // 使用代理
    proxy: {
      '/api': {
      // 目標代理伺服器地址
      // 1.111:10089
        target: 'http://192.168.5.9:5555', // 後端伺服器IP地址，例如http://192.168.5.9:5555
 

        ws: true, // 是否啟用websockets
        // 開啟代理，本地建立一個虛擬伺服器 允許跨域
        changOrigin: true,
        // 這樣既能有正確標識, 又能在請求介面的時候去掉api.
        pathRequiresRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

utils中的request.js

可配置請求攔截器和相應攔截器

import axios from 'axios'

// 請求攔截器（相當於門衛，每次發請求都要先進過這裡）
axios.
 
interceptors.request.use(function (config) {
  const Token = window.localStorage.getItem('Token')
  if (Token) {
    // 在請求頭中新增Token
    config.headers.Token = Token
  }
  // config 是當前請求的相關配置資訊物件，可以修改
  // 當這裡 return config之後，才會真正傳送請求
  return config
}, function (error) {
  // 請求傳送失敗
  return Promise.reject
 
(error)
})

export default axios

api目錄，存放封裝的請求模組

引入request.js，使用axios傳送請求

import request from '@/utils/request.js'

// 登入
const getLogin = {
  async login (param) {
    try {
      const res = await request.post('/api/v2/system/login', param)
      // console.log(res)
      return new Promise((resolve, reject) => {
        if (res.data.errCode === 200) {
          resolve(res)
        } else {
          reject(res)
        }
      })
    } catch (err) {
      console.log(err)
    }
  }
}
export default getLogin

使用封裝後的請求模組

// 登入
    async onLogin () {
      // 使用try捕獲異常
      try {
        // 表單驗證
        await this.$refs.form.validate()
        const { data } = await getLogin.login({
          userID: this.form.userID,
          password: md5(this.form.password)
        })
        // 設定token
        window.localStorage.setItem('Token', data.token)
        this.$message.success('登入成功')
        this.$router.push('/')
      } catch (error) {
        if (error) {
          this.$message.error('使用者名稱或密碼錯誤')
        }
      }
    },