vue项目中不使用mock也可以模拟数据

一般使用mock模拟数据更好，但是还有一个方法临时模拟一下数据，使用webpack-dev-server去模拟服务器（原理是node的express中的中间件设置路由），具体操作如下：

1. 先在根目录中的vue.config.js中书写如下代码：

   module.exports = {
       publicPath: './',
       assetsDir: 'static',
   	configureWebpack:{
   		devServer:{
   			before(app){//相当于搭建了一个小型的服务器
   				app.get("/api/getUsers",function (req,res) {
   					res.json({
   						code:200,
   						data:[{id:1,name:"bob",age:23},{id:2,name:"jack",age:24}]
   					})
   				})
   				app.post("/api/setUsers",function (req,res) {
   					res.json({
   						code:200,
   						msg:"修改成功"
   					})
   				})
   			}
   		}
   	}
   }

   ps: 只要是修改了该配置文件，就必须重启项目才能生效

2. 然后就可以直接通过axios调用接口了

           axios.get("/api/getUsers",{params:{uid:123456}}).then(res=>{
   			if(res.code===200){
   				console.log("success")
   			}
   		}).catch(e=>{
   			console.log(e)
   		})
   		axios.post("/api/setUsers",{id:1,name:"rose"}).then(res=>{
   			if(res.code===200){
   				console.log("success")
   			}
   		}).catch(e=>{
   			console.log(e)
   		})

   ps:注意axios如果设置了拦截器和域名配置项，需要单独引用axios去调接口，因为该接口默认是挂在项目运行时的本地服务器下的（一般是localhost:8080）

 

 

注意使用的是vue-vli3.0版本搭建的项目