IIS部署Vue单页应用URL Rewrite
首先介绍一下项目的组织结构。项目分为三个部分:1. 微首页 根目录,包括index.html和static目录,独立的Vue项目(路由使用了history的方案,是被微信转发坑的,只能 history,否则#后面的内容直接被截取了,问题微信开发团队)2. 管理后台 admin目录,独立的Vue项目3. 用ASP.NET Web API开发的api, api目录upload是上传图片存
首先介绍一下项目的组织结构。
项目分为三个部分:
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还是不能解决。
如果你觉得我的方案解决了你的问题,帮我点个赞哦,嘻嘻!!
更多推荐
所有评论(0)