在 IIS 上部署 VUE 应用程序答案

【问题标题】：Deploy VUE application on IIS在 IIS 上部署 VUE 应用程序
【发布时间】：2022-01-07 07:09:54
【问题描述】：

我正在尝试在 IIS 上部署 VUE 前端应用程序。
路由在开发模式下工作正常，但是，当我在 IIS 上托管我的 VUE 应用程序时，路由似乎中断了。有人可以建议如何配置 IIS 来处理 VUE 前端应用程序的路由（我正在使用 vue-router）？

【问题讨论】：

标签： vue.js iis web-applications vue-router web-deployment

【解决方案1】：

以下是使用正确的路由配置在 iis 服务器上部署 vue 应用程序的步骤：

设置 IIS

下载安装：
.NET Core Hosting Bundle
Microsoft URL Rewrite
重新启动 IIS 服务。
右键单击站点文件夹并选择“添加网站”
→ 输入网站名称（例如 myWebsite）
→ 创建一个文件夹（您的网站文件所在的位置）并输入该文件夹的路径作为网站物理路径。

生成 VUE 应用文件

转到项目文件夹并运行命令：npm run build
将生成的“dist”文件夹中的文件粘贴到您网站的物理路径中。
将“web.config”文件（如下）添加到网站物理路径中。

web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" 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="/" />
        </rule>
      </rules>
    </rewrite>
      <httpErrors>     
          <remove statusCode="404" subStatusCode="-1" />                
          <remove statusCode="500" subStatusCode="-1" />
          <error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />                
          <error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
      </httpErrors>
      <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</configuration>

【讨论】：