Vue.js | Node.js

vue.js history mode 사용하기

Godffs 2023. 7. 28. 16:04
반응형

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

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

 

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

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

 

해결방법

URL Rewrite를 설치한다

URL Rewrite 설치

 

URL Rewrite : The Official Microsoft IIS Site

Overview IIS URL Rewrite 2.1 enables Web administrators to create powerful rules to implement URLs that are easier for users to remember and easier for search engines to find. By using rule templates, rewrite maps, .NET providers, and other functionality i

www.iis.net

설치하고 나서 배포한 폴더에 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를 재시작해주면 된다

반응형