IIS部署VUE项目

背景

部门一直使用的是前后端不分离的ASP.NET MVC Framework的老框架，服务器使用的是IIS，所以只能使用UDM版本的Vue.js。

目前好多网上的教程都是Vue的工程项目，使用CDN直接引入js文件的教程少之又少。所以，最近研究了一下如何使用Vue工程，以及如何将Vue部署在IIS，体验一下前后端分离的快乐。

环境部署

在已安装IIS的基础上，需要再安装两个组件，分别是 url-rewrite 以及 application-request-routing。

这两者搭配起来，可以将vue项目中的get与post请求截获，转发给你的后台接口，也就是代理，这样可以实现跨域。

安装好后，重新打开IIS，即可看到

部署Vue项目

打包Vue项目

npm run build

复制文件

在打包程序后，将dist文件夹复制在非C盘的某个路径下（否则会报错无权限访问web.confi文件）。

发布

运行

可看到页面即代表正常。

但是发送get请求是行不通的，如果直接向后台接口请求数据，会报错跨域，这个时候就需要让IIS转发请求了。

我简单介绍一下接下来会发生的事情。

• 首先配置Vue项目中所有的Get或post请求中的URL前加上特殊标识，例如“/api/”。

也就是说，假如你原本要请求的后台链接为“www.baidu.com/home/index?id=10”，那么你在Vue项目中应该写为"/api/home/index?id=10"。

• 你在触发请求后，Chrome控制台中可查看到你请求的是当前Vue项目的域名+Vue项目中的请求URI，即localhost:8026/api/home/index?id=10。
• 然后你刚刚安装的两个IIS组件会通过你设置的正则表达式或通配符等判断你请求的这个URL需不需要代理。这里假设你设置的规则为如果你的URL中带有api字样，那么就转发给你设置的后台域名。
• 然后IIS这个中介会把请求到的数据再转发给你的Vue项目，然后就可以成功拿到数据了。

我下面使用axios来作为演示环境

设置代理

下面来设置刚刚安装的两个组件

application-request-routing

是不是很简单？

url-rewrite

双击图标-添加规则-空白规则-确定

接下来需要设置一个看上去稍微复杂的东西，但是只是看上去不好理解，但是我会用场景给大家演示。

场景演示

这里我给大家设置一个后台接口，方便演示。

后台接口URL为 http://192.168.2.190:89/api/get/stockSummary/searchPlStock?code=1

方式为get请求。

下面是我的Vue请求

触发请求后，控制台显示的请求URL为：

此时就需要IIS这个中介拦截这个请求，把URL转向我的后台接口。

现在我们编辑入站中的第②步，设置匹配URL。

也就是说，通过匹配字符串，匹配到我们控制台显示的URL。

我这里使用通配符*/api/*来匹配对应的axios请求，这个方式比较简单。

那么匹配到我们的请求URL后，要将请求转发到哪里呢？答案是在操作一栏中设置

下面我们在③，操作 一栏中设置我们的后台URL。

操作类型为重写

重写URL为 http://192.168.2.190:89/api/{R:2}

{R:2}代表什么呢？

它是一个变量，具体的值可以在测试模式中看到

以控制台中显示的URL为例，可以看到可以使用的变量，以及值。只要把后台URL与变量相结合，配置正确，即可完成请求。

这里有一个BUG，大家可以看到我修改了通配符，之前是*/api/*修改为了*api/*。原因是，这个模块只匹配URI部分，并没有域名部分，所以前面不可以再加/，否则匹配不到。

结果

现在可以正常请求数据了，到此结束。

感谢大家观看捧场！若有描述不清晰的地方可以在评论区探讨交流。