vue配置api代理详解与使用方法
创建的vue框架中,在自动生成的config目录下dev.env.js'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')ule.exports = merge(prodEnv, {NODE_ENV: '"development"',BASE_URL:'"/api"' //这里
·
创建的vue框架中,在自动生成的config目录下dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_URL:'"/api"' //这里是自己修改的
})
config目录下index.js(只放关键代码)
dev: {
env:require('./dev.env'),//开发环境下
// Paths
assetsSubDirectory: 'static', //除index.html之外的静态资源要存放的路径
assetsPublicPath: '/',//打包后,index.html里面引用资源的相对地址
proxyTable: {
//在api方式中,这里的对象名和dev.env.js的BASE_URL的值一样,可将BASE_URL的值替换
'/api':{//在代理方式中,设置访问前缀为api,如果不管用,改成'/api/*'
target:'http://11.0.34.122:5000',//本地测试
changeOrigin:true,//在vue-cli3下默认为true,是否跨域请求
//secure:true,//如果开头是https,打开这一条
pathRewrite:{//配置跨域请求 ,如果后台的接口前缀不是api,则重写前缀名,比如'^/api':'/save',则配出来的接口是http://127.0.0.1:8080/save/login
// //'^api':'/api' 这种接口配出来是 http://127.0.0.1:8080/api/login(举例)
'^/api':'' //则接口配出来是 http://127.0.0.1:8080/login(举例)
// }
}
},...
在src下新建文件夹api——>新建index.js
import axios from 'axios'
const api = axios.create({
baseURL:process.env.BASE_URL,
timeout:2000000//请求超时
})
// 基础信息接口
export function getDefaultMess(dev){
return api({
url:'/basicInfo/BasicInfoGET',
method:'get',
params:{dev}
})
}
组件调用接口,在vue文件中引用
import {getDefaultMess} from '../api/index'
export default {
data(){return {a:'',b:''}},
mounted:{this.loadPageMess()}, //初始化加载信息
methods:{
loadPageMess(){
let _this = this
getDefaultMess('A区信息').then(res => {
_this.a = res.data.a //举例,具体赋值看后台数据放在那里
_this.b = res.data.b
})
}
}
}
注意:
1、千万不要在config下dev.env.js和prod.env.js里写注释,会报错
2、给后台发送数据,方法为get时用params,例如params:{dev},传给后台的就是{dev:xxx},方法为post时用params或data都可以(附:data就是直接传数据,一般是json格式,如"{“a”:123,“b”:“hello”}")
3、引入api接口函数,调用时不需要加前缀.this,但在接口内会改变this指向,操作本组件data(){return}中的变量或方法时,需要通过et _this =this,然后_this.组件的变量或方法
更多推荐
已为社区贡献4条内容
所有评论(0)