vue多環境配置及axios封裝使用的方法

今天小編給大家分享一下vue多環境配置及axios封裝使用的方法的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

1.創建配置文件

在項目根目錄下創建 .env.環境名稱 例如：.env.prd .env.dev

在配置文件中配置不同環境的api路徑

# env

NODE_ENV = 'development'

# flag

VUE_APP_FLAG = 'dev' 

# domain url 接口域名、靜態資源地址

VUE_APP_APIDOMAIN = 'http://localhost:8081'

VUE_APP_ASSETSURL = ''

2.在config目錄

index.js : 導出當前環境配置中的地址

let envInfo = process.env    //process.env 獲取當前啟動的環境配置

let [apiDomain,assetsUrl] = [envInfo.VUE_APP_APIDOMAIN,envInfo.VUE_APP_ASSETSURL]  //獲取配置中的值

export default {

    apiDomain,

    assetsUrl

}

urlMap.js ：

/**

 * @desc 遠程接口地址和本地mock地址映射表

 * key：接口地址

 * value：本地地址

 */

const mockBaseUrl = 'http://rap2api.taobao.org/app/mock'

export default {

  '/user/login': mockBaseUrl + '/223948/login',

  '/user/info': mockBaseUrl + '/223948/info',

  '/user/logout': mockBaseUrl + '/223948/logout',

  '/table/list': mockBaseUrl + '/223948/table-list'

}

3.寫獲取地址的工具方法

在utils目錄下創建get-url.js

import config from '@/config' 

import urlMap from '@/config/urlMap'

/**

 * @desc 遠程接口地址和本地mock地址映射表

 * key：接口地址

 * value：本地地址

 */

export default function getUrl(url,api=1,domainType=1){

    //api: 0  mock服務  1接口服務

    //domainType:  1取apiDomain，可自定義其他域名

    let domain = ''

    if(domainType == 1){

        domain = config.apiDomain

    }

    return api===0 ? urlMap[url] : domain+url

}

4.在js中導入getUrl方法，并使用

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

import getUrl from '@/assets/js/utils/get-url'

export function getAccountList(data){

    return request({

        url: getUrl('/person/getPAList'),

        method: 'post',

        data

    })

}

5.request是封裝axios實例

在utils下的request中

import axios from 'axios'

import {  MessageBox } from 'element-ui'

//創建axios實例

const service = axios.create({

    timeout:5000

})

//request攔截器.可以后續完善

service.interceptors.request.use(config=>{

    //do something before request is send

    //if(store.getters.token){

    //    config.headers['token'] = getToken()

   // }

    return config

},error=>{

    //do something with request error

    console.log(error);

    Promise.reject(error)

})

//response攔截器,

service.interceptors.response.use(

    response => {

    const res = response.data

    if(res.code !='0'){

       // if(res.code ==='4001' || res.code==='4002'){

       //     MessageBox.confirm();

       // }

       //自己加一些處理

    }else{

        return res.content;

    }

    }

)

export default service;

6.調用方法

由于上面例子中getAccountList方法返回的是axios實例（也就是返回了Promise對象），所以調用如下,可以使用.then 或者.catch 執行

  created:function(){

       getAccountList(this.personAccountDTO).then(result=>{

          this.account = result;

      })

  },

7.添加啟動項目

在package.json 加上帶環境配置的啟動腳本dev 和prd

{

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint",

    "dev": "vue-cli-service serve --mode dev",   

    "prd": "vue-cli-service serve --mode prd"

  },

  ........

8.啟動項目

npm run dev   #.env.dev文件中配置生效

以上就是“vue多環境配置及axios封裝使用的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。