前后端分离-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文件里面添加以下代码即可
<rewrite>
   <outboundRules>
      <rule name="Remove ETag">
         <match serverVariable="RESPONSE_ETag" pattern=".+" />
         <action type="Rewrite" value="" />
      </rule>
   </outboundRules>
</rewrite>

安装中遇到的问题:

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

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

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="CHRoutes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

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

  • 4
    点赞
  • 40
    收藏
  • 打赏
    打赏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 11

打赏作者

by0920

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值