With the development of Internet technology, many Internet companies increasingly clear division of labor. Back-end developers only responsible for providing development and back-end interface, front-end personnel responsible for the design according to the pages and cover page, this time on the emergence of a new development model. Separation mode i.e., front and rear ends. Updates and more popular front-end framework to promote the development of the front and rear ends of the splitter. This mode shortens the project development cycle. However, sometimes embarrassing happens. For example, re-use VUE writing project and they will encounter.
In writing vue time items, the background did not provide the data, foreground we will simulate some test data developed locally, in axios when requesting these false data, we need to add a request path, it stands to reason that we write on the local data path to, but in the line when the project must modify the local path, it is easy to change leakage occurs, therefore, VUE gives a proxy conversion mechanism.
First, in the static folder create a mock folder used to store false data index.json file:
Secondly, in . Gitignore file, add static / mock , neither the purpose of later submitted to the local code when submitting git repository will not submit to line git repository;
Again, in your component written axios request events:
methods:{
getHomeInfo (){
axios.get('/api/index.json')
.then(this.getHomeInfoSuccess)
},
getHomeInfoSuccess(res){
console.log(res)
}
},
mounted(){
this.getHomeInfo()
}
然后，找到 config -- index.js -- proxyTable: { }配置项：
vue中的代理功能（其实是 webpack-dev-server提供的此方法），使用转发机制，能将 api/index.json 请求路径转发到 static/mock/index.json 文件下
proxyTable: {
'/api':{
target:'http://localhost:8080',
pathRewrite:{
'^/api':'/static/mock'
}
}
},
最后，可以输入localhost:8080/static/mock/index.json访问到你的假数据（因为上面提到了，static文件夹里的文件从外部是可以访问到的）；你也可以启动项目将数据打印到控制台查看；