vue项目怎么链接开发服务器

在前后端分离的前提下，完成前端的页面开发，就可以开始链接开发服务器

 

安装axios到项目中

npm install axios --save

 

安装完成后问你的后端开发人员要IP

 

后端会给一个IP以及端口号，比如：config.json文件里的代码

在相同位置新建相同文件，设置好IP

{
    "BASE_URL":"http://112.0.xxx.xxx:8400"
}

 

 

 

 

 

修改min.js文件如下，这里面引入了element包可以不引入

min.js

import Vue from 'vue'
import App from './App'
import router from './router'
/*import ElementUI from 'element-ui';*/
/*import 'element-ui/lib/theme-chalk/index.css'*/
import axios from 'axios'/*把刚刚安装axios引入进来*/
import VueAxios from 'vue-axios'/*引入*/

Vue.use(VueAxios,axios);
Vue.config.productionTip = false
Vue.use(ElementUI);/*可以不安装*/



/* eslint-disable no-new */
let startApp = function(){
    axios.get('static/config.json').then((res)=>{
        Vue.prototype.BASE_URL = res.data.BASE_URL;
        new Vue({
            el: '#app',
            router,
            components: { App },
            template: '<App/>'
          })
    });
}
startApp();

 

在项目src文件夹下新建文件夹如下：文件夹services里面在新建message.js

 

 message.js

export default {
    message(that,type,content){
        that.$message({
            type: type,
            message: content
        })
    }
};

　　

 

 在src文件下新建axios文件夹，api文件里面用来放后端的接口，request.js文件用来响应参数

 

 api.js

import Vue from 'vue'
import request from './request'

function getBaseUrl(){
    return Vue.prototype.BASE_URL
}
/* 工程列表 */
export const proLists = (data) =>{
    return request({
        url:'/project/selectProject',
        method:'post',
        baseURL:getBaseUrl(),
        data:data
    })
}

 

 

request.js

 

import axios from 'axios'
import qs from 'qs'
// import store from  '../store'
import ElementUI from 'element-ui'
import router from '../router'

/* 创建axios实例 */
const service = axios.create({
    timeout:5000
});

/* request拦截器==>对请求参数做处理 */
service.interceptors.request.use(config => {
    config.method === 'post'
    ?config.data = qs.stringify({...config.data})
    :config.params = {...config.params};
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    /* if(store.state.login.token && config.baseURL != 'http://58.221.7.174:10000'){
        config.headers['token'] = store.state.login.token;
    } */
    return config;
},error => {
    Promise.reject(error)
})

/* respone拦截器==>对响应做处理 */
service.interceptors.response.use(response => {
    if(response.data.result == 1){/*这里的1是链接成功的返回参数，根据实际情况修改，后端的接口文档里面会注明*/
        return Promise.resolve(response);
    }else{
        ElementUI.Message({
            message: response.data.message,
            type: 'warning'
        });
        return Promise.reject(response);
    }
},error =>{
      return Promise.reject(error.response)
})

export default service;

完成以上步骤就可链接到开发服务器了，用上接口就可以获取到数据了