如何配置symfony以在HTML5历史记录模式下使用Vue.js

Question

I have followed the tutorial on how to integrate Vue into Symfony (3.3), and it's working just fine.

I'd like to however use vue-router in HTML5 History mode, so with "real" urls instead of hashes. The problem is while that works well when initially loading the index page, that it won't work to open a page with a Vue URL that symfony doesn't know, cause symfony will throw a 404 error and not load the index view with the Vue app.

I'd like to only use symfony for specific route prefixes, like /blog, /api, and for all other routes load the index route that does nothing but load the vue app, but I don't really know where to start.

I assume I either have to change the .htaccess (currently using the exact one that came with the symfony installation) or somehow "catch" routes symfony doesn't know and redirect to the index page - however I'm stuck here since I'd want routes that are not found within the range of the few route prefixes I want symfony to use to still throw a 404 error.

Answer 1

Had the Same issue. Symfony is simultaneously delivering a Vue driven frontend and implementing an Rest-API. I solved it using some sort of PageNotFound-Fallback, so basically every route that was not found by the Symfony Router will be forwarded/redirected to the Frontend. So the FrontendController looks like this:

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');
  }
}

With an additional configuration in the routing.yml (see: Redirect with Event Listener for all "No route found 404 Not Found - NotFoundHttpException")

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

Finally, the VueRouter needs to be configured, so it keeps the correct environment, simply by adding the base Property in the Router constructor. If the frontend component is not displayed correctly, you can use router.push('some-route') to manually adjust it. Keep in mind that there will be no more 404 Errors, since they are all forwarded to the frontend, which can lead to bad scenarios using ajax on page load... Altough it feels like a hack, I hope this helps. Open for better solutions.

EDIT Symfony version 3.4.3, Vue version 2.5.1