vue项目部署在IIS上面的心得

一般在做前后端分离的时候, 前端服务器用的都是nginx,可是公司项目是需要运行在windows server上面的,所以综合考虑之下用IIS比较好一些,然而这方面的资料不如nginx那么多,所以就想记录一下这段时间遇到的坑,以防自己以后再遇到的时候忘记了,这样我可以翻出来看看。

这里只说一下url重写、代理设置、以及关闭ETag三个点,其余的都是网上可以轻松搜索到并且能看懂的,就不再赘述。

url重写

需要安装模块urlrewrite, 传送门:https://www.iis.net/downloads...
安装好了进入到IIS网站功能视图页面,双击如图所示按钮进行配置
vue项目部署在IIS上面的心得_第1张图片

然后点击页面右上方的添加规则按钮
vue项目部署在IIS上面的心得_第2张图片

选择空白规则即可,然后具体配置可以参考下图
vue项目部署在IIS上面的心得_第3张图片

  • 名称随意,可根据个人喜好设置
  • 匹配URL,选择使用正则表达式,然后模式根据请求的api来填写,比如我请求的api地址全都是为'/api/---',那我这里填写^((?!(api)).)*$即可;比如我请求的api地址类型有'/api/---'和'/bpi/----'这两种,那正则表达式可以写成这样:^((?!(api)|(bpi)).)*$
  • 然后条件添加一个不是文件的情况
  • 最后就是重写url那里写成/index.html

代理设置

这里需要urlrewrite和Application Request Routing两个模块,application request routing传送门:https://www.iis.net/downloads...

安装完成之后去到IIS功能视图主页面,双击Application Request Routing图标
vue项目部署在IIS上面的心得_第4张图片

然后在页面右侧找到Server Proxy Settings按钮,点击进入设置

vue项目部署在IIS上面的心得_第5张图片

把Enable proxy前面打上勾,然后在页面右侧点击应用即可(如果已经打勾了可以跳过此步)

然后就是去urlrewrite模块里面添加新规则,在配置的时候如下图所示:

vue项目部署在IIS上面的心得_第6张图片

这里的模式都选择通配符,比如你在前端请求的地址是'/api/----',那通配符请求模式就为'*api/*',条件那里不需要选择,然后重写的时候根据自己请求的实际地址来填写,比如我请求的实际地址是'http://segmentfault.com/write',那我这里就填写'http://segmentfault.com/{R:2}'

然后这里根据自己请求的api地址类型数目来设置规则数目

关闭ETag

这里是因为用了chrome的一个插件YSlow,检测出有一条 Configure entity tags (ETags)的评分为F,去网上搜了一下说是因为没有关闭ETag的原因,网上有的人说需要写一个dll来关闭,还有一些提供dll下载的地址,个人觉得不是很靠谱,就偷偷google了一下,最后在stackoverflow上面找到答案,答案出处:https://stackoverflow.com/que...

  • 这里也贴一下,大致方法就是在web.config文件里面添加以下代码即可

   
      
         
         
      
   

以上,有新坑再更新

你可能感兴趣的:(vue.js,iis,windows-server,javascript)