首先介绍一下项目的组织结构。
项目分为三个部分:
1. 微首页 根目录,包括index.html和static目录,独立的Vue项目(路由使用了history的方案,是被微信转发坑的,只能 history,否则#后面的内容直接被截取了,问候微信开发团队)
2. 管理后台 admin目录,独立的Vue项目
3. 用ASP.NET Web API开发的api, api目录

这里写图片描述

upload是上传图片存储的位置。

相信大家都知道IIS中解决Vue单页应用出现404的方法是使用URL Rewrite(如果你的IIS上没有URL Rewrite,请在网上搜下安装方法),把所有的请求都转到/index.html中。如下图:
这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

以上几幅图是解决问题的主要步骤,网上也有很多,这里我是参考网上一些帖子的,向他们致敬!可是如果问题只是这样就解决了我是不会自己动手写blog的。因为我的目录结构比较特殊:
1. 公司IT部门不给域名根目录,非得给个二级目录,如:http://domain.com/test
2. 如第一张图所示,我们把微首页的项目和后台系统已经api都放到了test目录

由1引出的问题以及解决办法

此时如果再按照配置url rewrite第四张图里,把请求都转向/index.html是不行的,因为index.html并不在根目录里面,因此要改成/test/index.html,这里test只是一个占位符,如果你跟我一样是在二级目录里,请改成自己的目录名称。

由2引出的问题以及解决办法

因为url rewrite中正则写的很简单,就是.*,这样会导致所以不是文件的请求都被导向index.html,这显然是有问题的。为什么呢?因为所有api都不是文件形式存在的!这真的很坑!那怎么解决呢?当然是修改匹配的正则了,不要一棒子打死,把包含api字样的给过滤掉,不要走url rewrite策略。说实在的我对正则不是很熟悉,它认识我我不认识它!在网上找了一会,最终匹配的正则是

^(?!.*api).*$

打完收工,贴一张最后的配置图
这里写图片描述

还有一个解决问题二的方法,不要把微网站的index.html和static直接放在test目录里面,而是创建一个根api和admin同级的目录,把它们放到这里,这样正则就不用那么复杂了。但是url rewrite还是不能解决。

如果你觉得我的方案解决了你的问题,帮我点个赞哦,嘻嘻!!

Logo

前往低代码交流专区

更多推荐