在我們做vue專案時通常會創一個config資料夾，裡面一般會包含 api.js和index.js，其中api.js一般用於存放一些url地址，例如

let base = 'http://192.168.1.110:8081/hhdj/'
export default {
  login: `${base}login/login.do`,
  codeUrl: `${base}validatecode.jsp`,
  newsList: `${base}news/newsList.do`
}

或者這樣寫

const serverUrl = 'http://www.fooju.cn/fjw/api.php?'
 

export default {
  serverUrl: 'http://www.fooju.cn/',
  map: 'http://online0.map.bdimg.com/tile/?qt=tile',
  login: serverUrl + 's=Login/login', /* 登入 */
  register: serverUrl + 's=Login/register', /* 註冊 */

對於index.js檔案裡面存放的是將資料傳送給服務端的一些處理，例如

import api from './api'
import axios from 'axios'
axios.defaults.withCredentials = true
 

let qs = require('qs')

export const login = data => {
  console.log('login api')
  return axios.post(api.login, qs.stringify(data))
}
export const codeUrl = api.codeUrl
export const getNews = data => {
  return axios.get(api.newsList, {params: data})
}

或者

import api from './api'
import axios from 'axios'
 

var qs = require('qs')
axios.defaults.withCredentials = true

export const getNewsList = params => {
  return axios.get (config.getNewsList, {params: params})
}
export const saveNews = formdata => {
  return axios.post (config.saveNews, formdata)
}
function createPostParams (obj) {
  return qs.stringify(obj)
}
export const login = data => {
  return axios.post (config.login, qs.stringify(data))
} 

對於index.js檔案中export輸出的方法，我們可以在main.js中一次性引入，然後在vue中的檔案通過this.$api.XXX()呼叫，例如

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import * as api from './config'
／／這裡需要注意的是路徑只寫到相應的資料夾下面即可
import mycom from './components/index'
import store from './store/store'
Vue.prototype.$api = api
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(mycom)
Vue.test = function () {
  alert()
}
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store:store,
  template: '<App/>',
  components: { App }
})

在不用的vue檔案中呼叫方法為，

<template>
  <div>
    <el-input v-model="user.username"></el-input>
    <el-input v-model="user.password"></el-input>
    <el-input v-model="user.checkcode"></el-input>
    <img :src="codeurl" alt="">
    <el-button type="sucess" @click="loginUser">提交</el-button>
   <!-- <a href="#/demo/111">111</a>
    <a href="#/demo/222">222</a>-->
    <router-link to="/demo/222">2222</router-link>
    <router-link to="/demo/111">1111</router-link>
  </div>
</template>

<script>
  export default{
    data () {
      return {
        user: {
          username: '',
          password: '',
          checkcode: ''
        },
        codeurl: ''
      }
    },
    methods: {
      loginUser () {
        this.$store.commit('setUser',this.user)
        this.$router.push('/demo/11')
        /*this.$api.login(this.user).then(function (res) {
          console.log(res.data)
        })*/這裡是呼叫不同方法的地方this.$api.login()
      }
    }
  }
</script>

<style scoped></style>