网上很多资料都是关于vue-cli2.x的。那vue-cli3的该怎么配置呢。用vue-cli3创建好项目以后会发现只有一个vue.cofig.js的配置文件而关于webpack的一些配置都不见了。其实很简单就在vue.config.js中进行代理配置就可以了
//vue.config.js module.exports = { //... devServer: { proxy: { '/api':{//base Url target: url,//需要代理的网址路由 changeOrigin:true, pathRewrite:{ '^/api':''//将请求地址中的'/api'替换掉 } } } }, }
接下来就是创建axiso部分
在npm install axiso -S后创建util.js
import axios from 'axios'; const Util={ apiPath:'/api' } //web2/help/queryBarrageMessage Util.ajax=axios.create({ baseURL:Util.apiPath, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) Util.ajax.interceptors.response.use(res=>{ return res.data; }) export default Util;
调用方式在需要调用的.vue文件中的script中引入
import $ from '../util';
就可以请求了
$.ajax({
method: 'post',
url: '/help/queryBarrageMessage',
data:{}
})
注意如果要以application/x-www-form-urlencoded的编码格式请求,要对data数据进行改写
引入
const querystring = require('querystring');//node自带模块无需额外下载
对data进行querystring(object)就可以转换为如jqery提交的表单格式的请求数据