1、public目录下新建mock文件夹，存放模拟数据.json文件；
image.png
public下的静态资源不经过webpack处理，能直接访问；
2、启动一个服务，访问.json数据（这里使用的是[使用python3启动服务](//www.greatytc.com/p/af7aa6dc64f9
)）
启动服务
启动成功后，便能使用http://localhost:8080/Home.json能正确访问到.json数据。
3、在vue.config.js配置代理
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': '/mock'
}
}
}
}
}
4、项目中使用mock数据
如.vue文件中使用Home.json:
this.$axios
.get("/api/Home.json")
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
//或，箭头函数写法
this.$axios
//服务端接口
.get("/api/Home.json")
.then(response => {
console.log(response);
try {
} catch (err) {
console.log(err, 1);
}
})
.catch(error => {});
}
未完待续~
不定期整理小记~，(❤ ω ❤)
