Recentemente tive alguns probleminhas ao fazer o deploy de aplicações em um servidor IIS, então resolvi fazer uma pesquisa aprofundada para buscar uma solução adequada para isso e mostrarei neste artigo.

Gerando a build da aplicação Quasar

Essa etapa é muito simples e bem explicada na documentação oficial. Caso esteja utilizando Vue, basta rodar o comando abaixo:

npm run build

Ou, caso esteja desenvolvendo em Quasar:

quasar Build

Depois de 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 pra ele.

Antes de criarmos nosso novo site, é necessário preparar o ambiente para recebê-lo.

Vamos clicar com o botão direito do mouse em Pools de Aplicativo (Applications Pools) e depois em “Adicionar Pool de Aplicativos…“.

Criamos uma novo pool com qualquer nome – chamaremos, neste exemplo, de W3_SINGLE_PAGES, e marcaremos 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>

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 anteriormente (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 observe se houve falha no carregamento de alguma dependência (CSS, JS, etc).

Referência

https://www.linkedin.com/pulse/hosting-vue-js-spa-build-microsoft-iis-zainul-zain/