Deploy de aplicações SPA em servidores IIS (Vue e Quasar)

Recentemente tive alguns probleminhas ao fazer o deploy de aplicações SPA em um servidor IIS. Então resolvi fazer uma pesquisa aprofundada para buscar uma solução adequada para isso, e estarei repassando para vocês.

Gerando a build da aplicação Quasar

Essa etapa é muito simples e bem explicada na documentação oficial do Quasar Framework.

Caso esteja utilizando Vue basta rodar o comando:

npm run build

Caso esteja desenvolvendo em Quasar, basta fazer:

quasar Build

Após finalizar, basta acessar a build na pasta dist do projeto.

Configurando o IIS

Verifique se o module URL-Rewrite está instalado em seu servidor IIS, caso não esteja baixe a versão correta para ele.

Antes de criarmos nossa nosso novo site, é necessário preparar o ambiente para recebe-lo.
Vamos clicar com o botão direito do mouse em Pools de Aplicativo(em inglês Applications Pools) e depois Adicionar Pool de Aplicativos…

Criamos uma novo pool com qualquer nome, iremos chamar nesse exemplo de W3_SINGLE_PAGES, e marcar a Versão do .NET CLR para Sem Código Gerenciado

Agora procure pela pasta onde as aplicações são armazenadas no servidor.

Crie a pasta com o nome da sua aplicação (Exemplo: sso), e dentro dela jogue todo o conteúdo gerado pelo comando de build (html, css, js, assets, etc)
Crie um novo site apontando para a pasta criada.
Crie um arquivo Web.config dentro da pasta do projeto com o seguinte código:

<?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>
 </system.webServer>
</configuration>

[Update 09/07/2019] Caso esteja utilizando uma versão do IIS menor que a 10, é necessário utilizar no Web.config uma configuração para identificar fontes woffe woff2:

<?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>
      <staticContent>
        <remove fileExtension=".woff" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    <remove fileExtension=".woff2" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      </staticContent>
  </system.webServer>
</configuration>

Por fim, no IIS clicamos com o botão direito em Default Web Site, e seguimos para Adicionar Aplicativo.

Inserimos seu nome virtual(neste caso sso), escolhemos o pool de aplicativos que criamos anteriomente(W3_SINGLE_PAGES), e localizamos o caminho físico onde colocamos a build.

Agora acessamos nossa aplicação pelo navegador com endereçoServidor/nomeAplicativo. Como exemplo, utilizei a aplicação de segurança desenvolvida com Quasar.
Ao acessar, inspecione a aplicação para verificar se não há erros no console, ou na aba de network observar se houve falha no carregamento de alguma dependencia(CSS, JS, etc)