Vue 404(브라우저의 주소 표시줄에 직접 주소를 입력하거나 페이지를 새로고침할 때 발생)

원인 : SPA에서 브라우저의 주소 표시줄에 직접 주소를 입력하거나 페이지를 새로고침할 때 발생하는 문제

대표적인 SPA 프레임워크(React, Angular, Vue.js )

 

SPA 란?

SPA(단일 페이지 어플리케이션)는 웹 어플리케이션의 디자인 패턴 중 하나로, 하나의 HTML 페이지를 기반으로 동적으로 페이지의 내용을 업데이트하는 어플리케이션을 말합니다. SPA는 전통적인 멀티페이지 어플리케이션과 달리 초기 로딩 시에 필요한 모든 리소스를 불러오고, 이후에는 페이지 전환 시에 필요한 데이터만을 비동기적으로 불러오는 방식을 사용합니다.

 

 

해결 방법 : 서버 설정 적용

 

Apache

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

 

Nginx

location / {
  try_files $uri $uri/ /index.html;
}

 

네이티브 Node.js

const http = require('http')
const fs = require('fs')
const httpPort = 80

http
  .createServer((req, res) => {
    fs.readFile('index.html', 'utf-8', (err, content) => {
      if (err) {
        console.log('"index.html" 파일을 열 수 없습니다.')
      }

      res.writeHead(200, {
        'Content-Type': 'text/html; charset=utf-8',
      })

      res.end(content)
    })
  })
  .listen(httpPort, () => {
    console.log('서버 수신 대기 중: http://localhost:%s', httpPort)
  })

 

기타 서버 등등

 

참고 사이트

https://router.vuejs.kr/guide/essentials/history-mode#Apache

Vue Router | Vue.js의 공식 라우터