前后端分离-IIS部署Vue前端项目

背景：

项目采用前后端分离技术，后端主要用springBoot+springCloud等技术，前端采用Vue。部署中遇到了种种问题，尤其是前端部署中，以下是采用IIS部署的详细步骤，以及问题的解决方案，希望能帮助到大家。后端运行步骤在另一篇文章中有记载，查阅：https://blog.csdn.net/by0920/article/details/87911408

首先，编写前端代码，安装nodes环境（自行百度），代码编写完后，修改config文件夹下的index.js中的IP地址,然后将Vue前端项目打包，打包命令：npm run build

成功后项目文件夹下会多出一个dist文件夹，就是要放服务器的文件夹：

上述步骤完成后，需要打开Windows server 服务器中的IIS：

打开IIS方法步骤：

1、右键“我的电脑”，选择“管理”，打开“服务器管理器”

2、点击左边菜单栏“角色”调出角色窗口

3、接着点击“添加角色”，弹出添加“角色向导”

4、点击“下一步”进入服务器角色选项

5、勾选“Web服务器（IIS）”，弹出是否添加Web服务器（IIS）所需的功能。点击“添加必需的功能”所回到角色向导

6、Windows 进程激活服务，Windows 进程激活服务通过删除对HTTP 的依赖关系，可统一 Internet 信息服务 (IIS) 进程模型。通过使用非 HTTP 协议，以前只可用于 HTTP 应用程序的 IIS 的所有功能现在都可用于运行 Windows Communication Foundation (WCF) 服务的应用程序。IIS7.0 还使用 Windows 进程激活服务通过 HTTP 实现基于消息的激活。点击“下一步”到Web服务器安装界面

7、点击下一步弹出Web服务器（IIS）的功能选项，勾选需要安装的组件。采用默认安装，在这种安装方式下，只会安装最少的一组角色服务。如果需要其他 IIS 角色服务，例如“应用程序开发”或“运行状况和诊断”，请确保在向导的“选择角色服务”页中选中与这些功能关联的复选框。

8、初级安装IIS默认基本上这些功能已经足够了，点击”下一步”进入安装选择确认界面。

9、系统列出了IIS服务器的安装列表，这里可以看到觉的HTTP功能，安全性及管理工具都在安装的列表里面，这时点击“安装”即可对这些组件及功能进行安装

10、等待安装完闭后关闭向导窗口，在打开浏览器输入本机IP，验证IIS7是否安装成功。

看到这个页面就说明已经装好了，在我的电脑点右键－管理，打开计算机管理中，到左边找internet信息服务即可。

接下来在 Windows server服务器上打开服务器管理器：

点击所有服务器，在相对应的服务器上选择IIS管理器：

打开后的页面：

下一步右击网站，选择添加网站：

这里边网站名称自己自定义，IP地址选择规定的，端口自定义主机名为空就行，然后点确定。

注：这一块可以参考https://blog.csdn.net/qq_16882597/article/details/80512305 

这个时候仅仅完成了一小部分，接下来的步骤很重要：

接下来设置URL重写，代理设置等。

url重写

需要安装模块urlrewrite， 传送门：https://www.iis.net/downloads...

安装好了进入到IIS网站功能视图页面，双击如图所示按钮进行配置

然后点击页面右上方的添加规则按钮

选择空白规则即可，然后具体配置可以参考下图

• 名称随意，可根据个人喜好设置
• 匹配URL，选择使用正则表达式，然后模式根据请求的api来填写，比如我请求的api地址全都是为'/api/---'，那我这里填写^((?!(api)).)*$即可；比如我请求的api地址类型有'/api/---'和'/bpi/----'这两种，那正则表达式可以写成这样：^((?!(api)|(bpi)).)*$

我的Vue中index.js中是这么写的：

再贴一张我设置的URL规则：

• 然后条件添加一个不是文件的情况
• 最后就是重写url那里写成/index.html

代理设置

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

安装完成之后去到IIS功能视图主页面，双击Application Request Routing图标

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

 

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

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

这里的模式都选择通配符，比如你在前端请求的地址是'/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文件里面添加以下代码即可

安装中遇到的问题：

1.安装好以后请求不到后台：

原因：没有设置URL入站规则，请求的只是静态资源路径。

解决方法：编辑入站规则如上方编辑入站规则示例图

2.页面能访问后，请求后台也通了以后，F5刷新当前页面会出现404.

解决方法：在发布后的VUE项目根目录下添加的web.config配置文件，内容如下：

前端的部署就已经成功了，后端的部署另一篇文章中记录。