Symfony 3 routes + VueJS's index.html with F5 falls to 404 - symfony

Question

I try connect Vue.js with Symfony 3, but have no idea how to create proper route configuration for it.
Project tree looks like that:
Project root
- app/
- Resources/
- views/
- default/
- web/
- assets/
- static/
index.html // here Vue is included
From Symfony I provide some REST API, the routes to it are prefixed by /api/. And I have some routes in Vue SPA.
The problem is if I press F5 in browser on any Vue route, which of course is not included in my routing.yml, browser returns 404 error from Symfony.
One half-working decision is when I put content of index.html to Resourses/views/default/twig with such a route:
fallback_for_vue:
path: /{req}
defaults: { _controller: 'AppBundle:Default:index' }
requirements:
req: ".+"
,taken from another question, but this is not actually what I need, because I don't want my frontend programmer to go somewhere except web/ folder.
So which configuration of Symfony routes I should use?

Answer 1

You need a wildcard address to point to your Vue.js application. Otherwise when you reload you send a request to Symfony, and it doesn't know hoy to handle it.
vuejs_wildcard_route:
defaults: { _controller: AppBundle:YourController:yourAction }
path: /vuejsappbasepath/{whatever}
requirements:
whatever: .*
defaults:
whatever: null
I have this setup working with a reactjs app and is working perfectly.
YourController is the controller that contains yourAction, the one that loads the template with the Vue.js panel.