13518219792
今天小编给大家分享一下vue多环境配置及axios封装使用的方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
成都创新互联主要从事成都网站建设、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务鄠邑,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
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封装使用的方法”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。
