[vue] laravel에서 vue 라우팅

보통 라우팅 처리는 서버 내 routes/web.php 에서 prefix와 path 를 설정하고 routing 시키는데,

작업후 서버에 파일을 올려도 라우팅이 안 됨...

근데 내가 등록한 path는 전부 php에 해당하는 path고, vue 화면을 띄우기 위해서는 해당 화면을 띄우는 php를 만들어야 하는 것

 

즉, vue 화면을 routing 하는 controller 내에 function으로 제작해야 하는데, 이때 php-laravel은 blade파일에서 경로를 읽어와 해당 파일(index.html)을 return한다는 듯 하다(지금 정신이 없어서 일단 횡설수설 아무소리라도 적어놓음)

 

그래서 순차적으로 정리하면

서버 내 resources/views/파일명.blade.php 파일을 만들고 routing 시킬(보여주고 싶은 화면의) html파일을 등록

<?php
include($appPath.'/../../public/index.html');
?>

vue로 제작된 html파일은 보통 서버에 올릴 때 build해서 index.html파일로 작성되어 올리므로, 해당 html파일을 include시킨다. include를 시켰다는건, php파일에 경로에 해당하는 페이지가 포함되어있다는 뜻 = include한 화면이 출력된다.

 

이렇게 include한 blade파일을 화면에 보이기 위해서는 해당 파일을 호출하는 함수가 필요하므로, controller 내에 blade파일을 호출하는 (return) function을 등록한다. 

public function index() {
      $basePath = realpath(__DIR__.'/../');
      return view('spaVue', ['appPath' => $basePath] );
}

 

이제 vue를 담은 blade 파일과 그 파일을 return 하는 controller->function 이 모두 준비되었으니 우리의 router인 web.php 파일에 해당 controller/function 경로를 등록해주면 된다.

//Vue 라우터 처리
$router->get('/', 'Controller@index');
//Vue route
$router->get('/{any}', 'Controller@index');

이때, path를 등록하는 위치는 web.php의 맨 하단에 등록하는데, 이는 php파일과의 충돌을 막기 위한 과정이다. php파일, function도 모두 경로로 routing 될 수 있으므로 path를 등록한 기능 php파일과 충돌이 일어나서는 안되기 때문에 모든 php파일에 해당하는 경로가 아닐 경우에만 routing이 되도록 처리하는 것.

 

아무튼 이 과정을 몰라서 왜 서버에서는 파일이 안보이나 했는데 팀장님 만만세