vuejs 의 라우터 url 로 직접 접속 가능하도록 해보자

vuejs 를 사용시 vue-router 를 사용하여, 경로를 지정할 수 있다.
그러면 about / price / 등 필요한 페이지를 분리할 수 있어 작업하기 편하다.
그런데, SPA 웹페이지이기 때문에 index.html 내에서 처리가 된다.

즉, 해당 경로로 직접 들어가면 404 페이지가 표시된다.
그렇다면 404 페이지를 모두 index.html 으로 보내면 된다. ( 참조 : https://router.vuejs.org/kr/guide/essentials/history-mode.html )

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

아파치 apache 설정시 다음과 같은 에러가 발생할 수 있다.

RewriteBase: only valid in per-directory config files
Action 'configtest' failed.
The Apache error log may have more information.

그런경우는 해당 설정이 <Directory > </Directory> 설정내에 넣어준다.

<Directory {{vue앱-디렉토리패스}}>

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

</Directory>

이런식으로 넣어준다. vue 앱과 서버측 (node / go / php 등) 어플과 조합을 해서 사용가능하다.

php 같은 경우 laravel 등의 프레임웍(modern php)을 써도 되고, 그냥 날코딩(legacy php)으로 만들어서 조합해도 상관없다.

{{vue-app-path}}/api/[php app file].php

형태로 php 어플을 실행해도 된다.