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
let [apiDomain,assetsUrl] = [envInfo.VUE_APP_APIDOMAIN,envInfo.VUE_APP_ASSETSURL]
export default {
apiDomain,
assetsUrl
}
urlMap.js :
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'
export default function getUrl(url,api=1,domainType=1){
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'
const service = axios.create({
timeout:5000
})
service.interceptors.request.use(config=>{
return config
},error=>{
console.log(error);
Promise.reject(error)
})
service.interceptors.response.use(
response => {
const res = response.data
if(res.code !='0'){
}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文件中配置生效
|