iis部署VUE(解决路由跳转和跨域和properly without JavaScript enabled问题)

#iis中部署vue项目(解决We’re sorry but xxxx doesn’t work properly without JavaScript enabled. Please enable it to continue)
简单介绍下环境，前端使用的是vue3.0-cli脚本架，后端接口使用的web api，前端全部通过接口进行交互，且项目和接口是跨域的，然后我是把前端和后端接口部署在同一台服务器上而且这个服务器上还部署了其他很多网站。下面开始部署说明。
首先前端通过rum run build命令对项目进行打包发布，发布之后将会得到如下文件结构：

复制以上文件到服务器上，也就是iis上了，博主这边使用的是阿里云服务器windows server 2008R2，iis版本是7.5，现在对部署做如下说明：
一.复制文件到服务器上，我这边是复制到了E盘，文件名就是用的域名的名称，截图如下：

二.打开iis管理器(Internet 信息服务管理器)
新建一个网站，并绑定到自己前端项目所在的文件位置，做过iis部署网站的肯定都知道就不细说了，提供几张图片参考：

我在前端网站上绑定了域名testvue.jkvending.com同时也绑定了本地1314端口也就是说外网是可以通过域名和ip:1314这两种方式来访问的
三.按照以往的网站部署经验的话就结束了，结果在部署好这些之后我在外网访问发现接口都报错了，提示
We’re sorry but xxxx doesn’t work properly without JavaScript enabled. Please enable it to continue，xxxx表示的是你的项目名称，表面上看是javascript没有启用，但是明显我是启用了的，很莫名其妙，只好查资料，现在将自己的解决方法记录如下：
1.你需要安装rewrite和requestRouter两个插件，点击下面的链接就可以下载
rewrite下载
requestRouter下载
下载安装之后在iis中便会出现如下两个图标

2.开始配置url重写规则，这里需要注意与网站其他提供的一些规则我发现略有差异，规则添加方法如下：
首先点击你要添加url重写规则的网站我这边就是testvue.jkvending.com这个了，点击右侧的URL 重写如下图

点击url重写之后选择右侧的添加规则如下图


添加路由入口重写，下面这个规则的主要作用就是保证每次路由请求都能从index.html主入口进入，保证路由的准确
名称：fixhtml5mode(可以随便起)
匹配URL
请求的UR(与模式匹配)
使用：正则表达式
模式：.*
条件：
{HTTP_HOST} 与模式匹配 模式 ip地址(101.37.87.198)
{SERVER_PORT} 与模式匹配 80
{REQUEST_FILENAME} 不是文件 N/A
{REQUEST_FILENAME} 不是目录 N/A
服务器变量：无
操作：重写
操作属性：/或者填/index.html
附加查询字符串：打勾
停止处理后续规则：打勾

添加api接口地址重写，这里的api表示的是你在vue中设定的代理，如果你用的是其他的，需要与你那边设定的一致，我这边的vue中是这样的，如下：

继续iis中url重写部分，api重写规则如下
名称：api(可以随便写)
匹配URL
请求的URL(与模式匹配)
使用：正则表达式
模式：api/
条件：无
服务器变量：无
操作：重写
操作属性：http://101.37.87.198:888/{R:2}
附加查询字符串：打勾
停止处理后续规则：打勾

添加域名路由，这个规则主要是用来解决通过testvue.jkvending.com访问路由页面打开后刷新出现404的问题
名称：domin(可以随便起)
匹配URL
请求的UR(与模式匹配)
使用：正则表达式
模式：.*
条件：
{HTTP_HOST} 与模式匹配 模式 网站绑定的域名(http://testvue.jkvending.com)
{SERVER_PORT} 与模式匹配 80
{REQUEST_FILENAME} 不是文件 N/A
{REQUEST_FILENAME} 不是目录 N/A
服务器变量：无
操作：重写
操作属性：/或者填/index.html
附加查询字符串：打勾
停止处理后续规则：打勾

添加端口访问时的路由支持，这个主要是解决通过101.37.87.198:1314访问时路由页面打开后刷新404的问题
名称：http404(可以随便起)
匹配URL
请求的UR(与模式匹配)
使用：正则表达式
模式：.*
条件：
{HTTP_HOST} 与模式匹配 模式 网站绑定的ip(http://101.37.87.198)
{SERVER_PORT} 与模式匹配 1314
{REQUEST_FILENAME} 不是文件 N/A
{REQUEST_FILENAME} 不是目录 N/A
服务器变量：无
操作：重写
操作属性：/或者填/index.html
附加查询字符串：打勾
停止处理后续规则：打勾

url重写规则就这些，接下来要开启iis中代理服务，方法如下



Enabled proxy：打勾
HTTP version：HTTP/1.1（默认是pass through，这个可改可不改，如果其他地方试过不行改了试试，我这边是1.1的保持一致我就选了这个）

到此配置就结束了，简单总结如下： 由于自己也是第一次在windows下部署vue，接口跨域问题折磨了2天，找了很多资料，也尝了nginx，可以访问但是绑上域名后会与iis有冲突，最终还是要再iis中解决问题，网上的解决方案几乎都是url重写与启用代理，也都试了然而并不可以，一度怀疑解决不了了，好在最后解决了，我本人的理解是因为我vue项目和后端接口是部署在同一个服务器上的，而且ip地址一样只是端口不一样，这样在vue项目中请求路由的时候url地址重写先经过第一个规则(原来没有写ip和端口条件的时候)通过跳转到index.html入口执行里面的api跨域接口继续匹配第一个规则结果也通过了就又调回了index.html入口导致了死循环，加上端口之后就变成了先请求url第一个规则通过跳转到index.html执行跨域接口匹配第一个规则不通过(因为接口的端口跟vue项目的端口不一样)匹配第二个规则通过触发http://101.37.87.198:888接口地址的重定向，这样就通了，刷新的时候由于主机名发生了变化匹配第一个规则不通过第二个规则不通过第三第四个必有一个通过。 个人理解，不对的大家可以相互交流。不喜勿喷，谢谢。