背景
部门一直使用的是前后端不分离的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部分,并没有域名部分,所以前面不可以再加/,否则匹配不到。
结果
现在可以正常请求数据了,到此结束。
感谢大家观看捧场!若有描述不清晰的地方可以在评论区探讨交流。