vue多環(huán)境配置及axios封裝使用的方法

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

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)鄠邑,10年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

1.創(chuàng)建配置文件

在項目根目錄下創(chuàng)建 .env.環(huán)境名稱例如：.env.prd .env.dev

在配置文件中配置不同環(huán)境的api路徑

# env

NODE_ENV = 'development'

# flag

VUE_APP_FLAG = 'dev'

# domain url 接口域名、靜態(tài)資源地址

VUE_APP_APIDOMAIN = 'http://localhost:8081'

VUE_APP_ASSETSURL = ''

2.在config目錄

index.js : 導(dǎo)出當(dāng)前環(huán)境配置中的地址

let envInfo = process.env //process.env 獲取當(dāng)前啟動的環(huán)境配置

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目錄下創(chuàng)建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服務(wù) 1接口服務(wù)

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

let domain = ''

if(domainType == 1){

domain = config.apiDomain

}

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

}

4.在js中導(dǎo)入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'

//創(chuàng)建axios實例

const service = axios.create({

timeout:5000

})

//request攔截器.可以后續(xù)完善

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.調(diào)用方法

由于上面例子中g(shù)etAccountList方法返回的是axios實例（也就是返回了Promise對象），所以調(diào)用如下,可以使用.then 或者.catch 執(zhí)行

created:function(){

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

this.account = result;

})

7.添加啟動項目

在package.json 加上帶環(huán)境配置的啟動腳本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多環(huán)境配置及axios封裝使用的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：vue多環(huán)境配置及axios封裝使用的方法
本文來源：http://muchs.cn/article38/ihshsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、響應(yīng)式網(wǎng)站、搜索引擎優(yōu)化、建站公司、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容