Vue 配置前端后端路由地址
前端路由配置
配置项目地址
proxyTable: {
'/api': { //使用"/api"来代替
target: 'http://127.0.0.1:8000', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'http://127.0.0.1:8000' //路径重写
}
}
},
配置页面路由、路径跳转
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
//访问的路径
path: '/login',
name: 'login',
//页面
component: login
}
]
})
后端路由配置
配后端请求地址
- 安装
axios
:npm install --save axios
安装 axios
的依赖
-
axios
是一个基于Promise
用于浏览器和 nodejs
的 HTTP
客户端,本质上也是对原生XHR
的封装
import Vue from 'vue'
import App from './App'
import router from './router'
// 引用axios,并设置基础URL为后端服务api地址
var axios = require('axios')
//配置后端的访问地址
axios.defaults.baseURL = 'http://localhost:8000/'
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=utf-8';
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/* eslint-disable */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})