vue.js history mode 사용하기

url에서 /#/ 태그를 지우려고

vueRouter에서 Mode를 'hash' -> 'history'로 변경했다

 

vue.js를 빌드해서 IIS에 배포했는데 첫 index.html 페이지는 잘 열리는데

하위 페이지들이 안 열리고 404 오류가 나온다

 

해결방법

URL Rewrite를 설치한다

URL Rewrite 설치

URL Rewrite : The Official Microsoft IIS Site

설치하고 나서 배포한 폴더에 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>
  </system.webServer>
</configuration>

 

iis를 재시작해주면 된다