vue+项目中怎么创建服务器,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= falseVue.use(ElementUI);/*可以不安装*//*eslint-disable no-new*/let startApp= function(){

axios.get('static/config.json').then((res)=>{

Vue.prototype.BASE_URL=res.data.BASE_URL;newVue({

el:'#app',

router,

components: { App },

template:''})

});

}

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'

functiongetBaseUrl(){returnVue.prototype.BASE_URL

}/*工程列表*/export const proLists= (data) =>{returnrequest({

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;

}*/

returnconfig;

},error=>{

Promise.reject(error)

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

}else{

ElementUI.Message({

message: response.data.message,

type:'warning'});returnPromise.reject(response);

}

},error=>{returnPromise.reject(error.response)

})

exportdefault service;

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