# Vue 配置前端后端路由地址

Vue 配置前端后端路由地址

前端路由配置

配置项目地址

• 修改 config/index.js的配置文件

proxyTable: {
 '/api': {  //使用"/api"来代替
   target: 'http://127.0.0.1:8000', //源地址
   changeOrigin: true, //改变源
   pathRewrite: {
     '^/api': 'http://127.0.0.1:8000' //路径重写
   }
 }
},

配置页面路由、路径跳转

• 依赖：vue-router
• 注册 router

import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

• 修改 router/index.js的配置文件

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/>'
})