1. 【環(huán)境變量】背景：

• 在我們的實(shí)際項(xiàng)目開發(fā)中呢撞，一般會(huì)區(qū)分幾個(gè)環(huán)境蘑辑，分別是開發(fā)環(huán)境星爪、測試環(huán)境和生產(chǎn)環(huán)境，當(dāng)然不排除分的比較細(xì)的還有預(yù)發(fā)布環(huán)境曾掂，一般來說這四個(gè)環(huán)境就足夠我們使用了惫谤。

2. 新建環(huán)境步驟：

• 2.1 在根目錄下新建4個(gè)環(huán)境變量文件：

• .env.dev【開發(fā)環(huán)境】
• .env.test【測試環(huán)境】
• .env.uat【預(yù)發(fā)布環(huán)境】
• .env.prod【生產(chǎn)環(huán)境】
• 四個(gè)環(huán)境內(nèi)的文件內(nèi)容如下：

//.env.dev文件
NODE_ENV = dev
# base url
VUE_APP_BASE_URL = "https://dev.it98k.cn"
--------------------------------------------------------------
//.env.test文件
NODE_ENV = test
# base url
VUE_APP_BASE_URL = "https://test.it98k.cn"
--------------------------------------------------------------
//.env.uat文件
NODE_ENV = uat
# base url
VUE_APP_BASE_URL = "https://uat.it98k.cn"
--------------------------------------------------------------
//.env.prod文件
NODE_ENV = prod
# base url
VUE_APP_BASE_URL = "https://prod.it98k.cn"
--------------------------------------------------------------

2.2 然后修改package.json【scripts】下的啟動(dòng)命令:

"scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build:test": "vue-cli-service build --mode test",
    "build:uat": "vue-cli-service build --mode uat",
    "build:prod": "vue-cli-service build --mode prod"
  },

• 這樣修改完，本地啟動(dòng)項(xiàng)目命令依然是：npm run serve
• 打包測試環(huán)境的命令是：npm run build:test
• 打包預(yù)發(fā)布環(huán)境的命令是：npm run build:uat
• 打包生產(chǎn)環(huán)境的命令是：npm run build:prod

3. 【基于axios的二次封裝】背景：

• 在實(shí)際開發(fā)項(xiàng)目中珠洗，網(wǎng)絡(luò)請(qǐng)求基本上使用axios網(wǎng)絡(luò)請(qǐng)求工具溜歪，但是單純的使用像axios.get('http://xxxxx.com')來請(qǐng)求接口，隨著項(xiàng)目越來越大许蓖，頁面越來越多蝴猪，功能越來越完善，我們勢必會(huì)寫大量的axios請(qǐng)求膊爪，每次都這么寫自阱，費(fèi)時(shí)費(fèi)力，也不方便統(tǒng)一管理米酬，所以沛豌，需要將axios進(jìn)行二次封裝，以達(dá)到我們開發(fā)項(xiàng)目的時(shí)候省時(shí)赃额、省力琼懊、省心。

• 3.1 第一步爬早，在src目錄下哼丈，新建utils/request.js文件，文件內(nèi)容如下：

//首先引入axios
import axios from 'axios'
//然后通過create方法來創(chuàng)建一個(gè)請(qǐng)求服務(wù)
//然后create方法內(nèi)有一些配置項(xiàng)筛严，比如接口域名`baseURL`醉旦、接口請(qǐng)求超時(shí)時(shí)間`timeout`
//接口url`url`
//接口請(qǐng)求方式`method`等等，需要我們按需傳入
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL, // 完整的api地址 = 接口域名+ 接口路徑
  timeout: 5000 // 請(qǐng)求超時(shí)時(shí)間 5s
})
//下面會(huì)定義兩個(gè)攔截器，分別是 `請(qǐng)求攔截器`车胡，`響應(yīng)攔截器`
//`請(qǐng)求攔截器`是前端請(qǐng)求后端接口前處理的一些邏輯檬输，比如開啟loading，配置header請(qǐng)求頭等等
//`響應(yīng)攔截器`就是后端響應(yīng)我們前端匈棘，返回回來的數(shù)據(jù)丧慈，比如我們可以在這響應(yīng)攔截器內(nèi)拿到status Code
//拿到后端接口返回的code，關(guān)閉loading主卫、根據(jù)code碼處理一些詳細(xì)的邏輯等等一系列操作
//request interceptor   請(qǐng)求攔截器  
service.interceptors.request.use(
  config => {
    // do something before request is sent逃默。在發(fā)送請(qǐng)求之前做一些事情
    config.headers['token'] = "xxxxxx"
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// response interceptor  響應(yīng)攔截器
service.interceptors.response.use(
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200) {
      alert(res.message || 'Error')
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    alert(res.message || 'Error')
    return Promise.reject(error)
  }
)

// 最后暴露我們聲明的 service 服務(wù)
export default service

4. api的封裝與使用

• api請(qǐng)求方法，也是要做一個(gè)封裝的簇搅，封裝流程如下

• 4.1 在src目錄下新建api/index.js文件完域，文件內(nèi)容如下：

import request from '../utils/request';
//登錄接口，post方式傳參用data
export function login(data) {
  return request({
    url: '/api/login',
    method: 'post',
    data
  })
}
//獲取xx列表接口瘩将，get方式傳參用params
export function getList(params) {
  return request({
    url: '/api/getList',
    method: 'get',
    params
  })
}

• 4.2 使用封裝好的api

• 在需要的頁面吟税，比如我們的登錄頁面需要調(diào)用登錄接口，我們就要這樣用

//首先第一步要用import導(dǎo)入進(jìn)來我們的登錄接口
import { login } from '../api/index'

//然后直接調(diào)用login方法
login({username:'admin',password:"123456"}).then(res=>{
      console.log(res);
})