其实,只需要配置vue的config/index.js文件就行了,其他的axios的baseURL不用管,不写。代码如下:

// see http://vuejs-templates.github.io/webpack for documentation.

'use strict'

var path = require('path')

module.exports = {

build: {

env: require('./prod.env'),

index: path.resolve(__dirname, '../dist/index.html'),

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',

assetsPublicPath: '/',

productionSourceMap: true,

productionGzip: false,

productionGzipExtensions: ['js', 'css'],

bundleAnalyzerReport: process.env.npm_config_report

},

dev: {

env: require('./dev.env'),

port: 8080,

autoOpenBrowser: true,

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {

'/ctx': {// 替换target中的请求地址,也就是说以后你在请求http://10.100.55.110:8000/api/userauth/这个地址的时候直接写成/ctx即可。

target:'http://10.100.55.110:8000/api/userauth', // 你请求的第三方接口

changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题

pathRewrite:{ // 路径重写,当路径中有ctx时,'^/ctx':'/ctx',路径中的ctx转为target中的地址,后面带有'/ctx';路径中没有ctx时,'^/ctx':'',路径中的ctx只转为target中的地址,后面不带'/ctx'

'^ /ctx': ''

}

}

},

cssSourceMap: false

}

}

然后,登录接口components/login.vue代码这样写:

<template>

<div id="login">

<span>用户名:</span><input type="text" v-model="rule.userName">

<span>密码:</span><input type="password" v-model="rule.passWord">

<button @click="dl()">登录</button>

</div>

</template>

<script>

import {b64_md5} from '../b64_md5/md5.js';

export default {

name:'login',

data(){

return{

rule:{

userName:'',

passWord:''

}

}

},

methods:{

dl:function(){

var pata={"userName":this.rule.userName,"password":b64_md5(this.rule.passWord)};

// console.log(pata);

var url="/ctx/verify/loginByPwd";

this.$api.post(url,pata).then(function(response){

console.log("response:"+response.status);

}).catch(function(error){

console.log("error:"+error);

});

}

}

}

</script>

最后,本地输出成功接口:http://localhost:8080/ctx/verify/loginByPwd

Logo

加入社区!打开量化的大门,首批课程上线啦!

更多推荐