1,安装配置axios
- npm install axios --save 安装axios到项目中
- 在main.js中全局注册axios
// 全局注册axios
import axios from 'axios'
Vue.prototype.$axios = axios
2,创建mock文件,在vue项目中只能访问static文件夹下的文件,其它的都会跳到项目初始页面,因此mock文件夹要创建在static下面。结构为/static/mock/json.json
3,在需要获取数据的页面使用axios获取mock数据。
methods: {
getReqData() {
this.$axios.get('/static/mock/json.json').then(res => {
console.log(res)
})
}
},
mounted() {
this.getReqData()
}
4,上面的步骤已经可以获取到mock数据,但是如果每个页面的请求都以这种方式,在之后如果要换真实数据替换mock数据就会很麻烦,因此可以通过webpack提供的转发机制proxyTable实现请求路径转发。找到根路径config目录下的index.js文件修改proxyTable如下:
proxyTable: {
'/api': {
target: "http://localhost:8080",
pathRewrite: {
'^/api': '/static/mock'
}
}
}
设置完配置文件要重启服务器才会生效。