iis 部署 netcore 和vue 共用端口

apgk1

已于 2023-11-09 14:38:07 修改

阅读量491

点赞数

分类专栏：笔记 NetCore vue 文章标签： vue.js 前端 javascript 经验分享 c#

于 2023-11-09 11:57:48 首次发布

本文链接：https://blog.csdn.net/apgk1/article/details/134308253

版权

笔记同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

NetCore

6 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue应用和API服务不在同一站点的情况下，通过配置IIS的web.config实现路由转发和代理，以便在一个端口上对外提供服务，包括使用history模式和处理404/500错误的详细步骤。

摘要由CSDN通过智能技术生成

常规情况下，vue 和api是分开的两个站点进行部署，若是要对外只有一个端口的话，采用以下梁总方式即可。

1.需要配置路由转发和代理开启（vue 使用hisoty模式）

参考链接.netCore + vue（history模式）项目整合在IIS上的部署（无需代理）

主要路由配置（web.config）

<rewrite>
    <rules>
        <rule name="api" patternSyntax="Wildcard" stopProcessing="true">
            <match url="*api/*" />
            <action type="Rewrite" url="/api/{R:2}" />
        </rule>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
             <match url="^(?![api]).*$" />
             <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_FILENAME}" pattern=".*\.[\d\w]+$" negate="true" />
            </conditions>
            <action type="Rewrite" url="/index.html" />
        </rule>
    </rules>
</rewrite>

2. vue 和 api 不在同一个站点，所有请求走vue所在站点，需要安装代理插件，大体流程如下：

（1）安装插件（ARRv3_0.exe 代理服务）

（2）安装后需要重新关闭iis再次打开，就看得到代理了，把代理开启

（3）web.config 配置就如下：

<rewrite>
    <rules>
        <rule name="api" patternSyntax="Wildcard" stopProcessing="true">
            <match url="*api/*" />
            <!--http://localhost:xxx 替换成自己的api所在站点地址 -->
            <action type="Rewrite" url="http://localhost:xxx/api/{R:2}" />
        </rule>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
            <match url="^(?![api]).*$" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_FILENAME}" pattern=".*\.[\d\w]+$" negate="true" />
            </conditions>
            <action type="Rewrite" url="/index.html" />
        </rule>
    </rules>
</rewrite>

注意：若是发现刷新直接404 的用下方的配置

<rewrite>
    <rules>
        <rule name="api" patternSyntax="Wildcard" stopProcessing="true">
            <match url="*api/*" />
            <!--http://localhost:xxx 替换成自己的api所在站点地址 -->
            <action type="Rewrite" url="http://localhost:xxx/api/{R:2}" />
        </rule>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
            <match url="^(?![api]).*$" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_FILENAME}" pattern=".*\.[\d\w]+$" negate="true" />
            </conditions>
            <action type="Rewrite" url="/index.html" />
        </rule>
        <!--刷新报404问题终极解决-->
        <rule name="*" stopProcessing="true">
            <match url=".*" />
            <conditions>
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            </conditions>
            <action type="Rewrite" url="/index.html" />
        </rule>
    </rules>
</rewrite>

参考资料：

.netCore + vue（history模式）项目整合在IIS上的部署（无需代理）

IIS10.0部署netcor+vue前后端两个HTTPS域名方法IIS配置API接口转发