vue中的代理转换机制proxyTable配置项

2022-11-24 0 551

随著网络控制技术的产业发展,那时许多网络子公司社会分工愈来愈明晰了。后端合作开发者只负责管理后端合作开发及USB的提供更多,后端相关人员负责管理依照草图出网页及套网页,那个这时候就再度出现了一类捷伊合作开发商业模式。即其间端分立商业模式。后端架构预览及普及化更为促进了其间端分立合作开发。此种商业模式延长了工程项目合作开发阶段。但,有这时候会会再度出现较为难堪的情形。比如说再采用VUE写工程项目地这时候,就会碰到。

vue中的代理转换机制proxyTable配置项

在写vue工程项目地这时候,前台没及时处理提供更多统计数据,他们前台会在邻近地区演示许多统计数据展开合作开发试验,在axios允诺那些假统计数据的这时候,他们须要加进两个允诺方向,按规矩而言他们写上邻近地区统计数据方向方可,但在工程项目上架的这时候就得修正那些邻近地区方向,这种很难再度出现漏改,因此,vue得出了两个全权新瑞福。

具体而言,在static实用性文档下增建两个mock实用性文档用作放置假统计数据index.json文档:

vue中的代理转换机制proxyTable配置项

其二,在 .gitignore 文档,加进static/mock ,目地之后在递交标识符的这时候既不能递交到邻近地区git库房中也不能递交到线上git库房中;

再度,在你的模块中写好axios允诺该事件: 

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实用性文档里的文档从外部是可以访问到的);你也可以启动工程项目将统计数据打印到控制台查看;

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务