Vue 配置前端后端路由地址
前端路由配置
配置项目地址
proxyTable: {
'/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'
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8000/'
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=utf-8';
Vue.prototype.$axios = axios
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})