Vue应用部署到IIS默认网站下返回503错误如何解决

• 已成功将Vue应用部署在IIS根站点8181端口可正常运行，需迁移部署到默认网站80端口的子应用下
• 测试流程：使用VS19模板新建Vue项目，npm run serve运行正常，npm run build打包完成
• IIS配置：在默认网站下添加名为VuejsApp2的应用，物理路径指向dist文件夹，授予Everyone完全控制权限，已安装URL Rewrite模块，应用池使用正常运行的同类型集成模式应用池
• 访问http://localhost/VuejsApp2返回503 service unavailable错误，排查确认应用池处于运行状态，无崩溃停止记录
• 尝试修改web.config重写路径为/index.html仍返回503错误

初始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>

修改后测试用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="/index.html" />
                  </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>

附相关截图：

• 文件夹结构：
• URL Rewrite已安装截图：
• IIS设置截图：
• 错误页截图：

按以下步骤依次排查修改：

1. 修改Vue项目打包配置
   打开项目根目录下的vue.config.js文件（无则新建），添加publicPath配置，路径和IIS子应用名称保持一致：

module.exports = {
  publicPath: '/VuejsApp2/'
}

修改完成后重新执行npm run build打包，替换IIS应用指向的dist文件夹内容。

2. 替换正确的web.config配置
   子应用部署场景下重写路径需要携带子应用前缀，错误页路径也需要对应修改，推荐先移除冗余配置排除干扰：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Vue History Mode" 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="/VuejsApp2/index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

如果需要保留自定义错误页，对应修改路径前缀即可。

3. 修正权限和应用池配置

• 给dist文件夹添加应用池对应标识的读取、执行权限：打开应用池的高级设置，查看「标识」字段对应的账户，在dist文件夹的安全设置中添加该账户，授予读取和执行、列出文件夹内容权限。
• 确认应用池的.NET CLR版本设置为「无托管代码」，托管管道模式为集成模式。

4. 端口冲突排查
   打开cmd执行netstat -ano | findstr "80"，确认80端口的占用进程为IIS的w3wp.exe，若有其他程序占用80端口先停止对应程序，再执行iisreset命令重启IIS。

5. 错误日志定位
   若以上操作仍未解决，打开Windows事件查看器，定位到「Windows日志-应用程序」，查看来源为IIS-W3SVC-WP的错误条目，根据具体报错信息定位问题。

内容的提问来源于stack exchange，提问作者Eric Brown - Cal