HTML5 히스토리 모드에서 Vue.js와 동작하도록 symfony를 설정하는 방법

Question

Vue를 Symfony (3.3)에 통합하는 방법에 대해 tutorial을 따라 왔으며 정상적으로 작동합니다.

그러나 HTML5 기록 모드에서 vue-router를 사용하고 싶습니다. 따라서 해시 대신 "실제"URL을 사용하십시오. 문제는 인덱스 페이지를 처음로드 할 때 잘 작동하는 반면 symfony가 모르는 Vue URL이 포함 된 페이지를 열지는 못하기 때문에 symfony가 404 오류를 발생시키고 Vue 앱.

/blog,/api와 같은 특정 경로 접두어에만 symfony를 사용하고 싶습니다. 다른 모든 경로의 경우 vue 앱을로드하지만 인덱스 경로를로드하지만 실제로 어디에 있는지 모르겠습니다. 시작한다.

.htaccess (현재 정확히 one that came with the symfony installation을 사용하고 있습니다)를 변경하거나 심포니가 알지 못하는 경로를 "캐치"하고 색인 페이지로 리디렉션한다고 가정합니다. 그러나 내가 원했기 때문에 여기에 붙어 있습니다. 심포니가 404 오류를 던지기 위해 사용하기를 원하는 몇몇 경로 접두사의 범위 내에서 발견되지 않는 경로.

Answer 1

같은 문제가있었습니다. Symfony는 Vue 구동 프론트 엔드와 Rest-API 구현을 동시에 제공합니다. 나는 일종의 PageNotFound-Fallback을 사용하여 그것을 해결 했으므로, 기본적으로 Symfony 라우터가 찾지 못한 모든 경로는 Frontend로 전달/리디렉션됩니다. 그래서 FrontendController은 다음과 같습니다 다음 routing.yml에 추가 구성으로

class FrontendController extends Controller{ 

    public function indexAction(Request $request) 
    { 
    $base=$request->getBaseUrl(); 
    return $this->render('default/index.html.twig',['basePath'=>$base]); 
    } 


    public function pageNotFoundAction() 
    { 
    return $this->forward('AppBundle:Frontend:index'); 
    } 
} 

(참조 : Redirect with Event Listener for all "No route found 404 Not Found - NotFoundHttpException"를)

pageNotFound: 
path: /{path} 
defaults: { _controller: AppBundle:Frontend:pageNotFound, path: '' } 
requirements: 
    path: .* 

가 마지막으로 VueRouter 구성해야, 올바른 환경을 유지 있도록 라우터 생성자에 base 속성을 추가하기 만하면됩니다. 프런트 엔드 구성 요소가 올바르게 표시되지 않으면 router.push('some-route')을 사용하여 수동으로 조정할 수 있습니다. 404 오류가 더 이상 발생하지 않을 것입니다. 모두 프론트 엔드에 전달되므로 페이지로드시 ajax를 사용하는 나쁜 시나리오가 발생할 수 있습니다. 해킹 같은 느낌이 들기는하지만 이것이 도움이되기를 바랍니다. 더 나은 솔루션을 찾으려면 열어보십시오.

편집 심포니 버전 3.4.3, 뷰 버전 2.5.1