404 when reloading a route in vue js after build

I have an application in vue that when reloading the browser gives me a 404, since logically /algo/otro/id does not exist inside the server to be a SPA .

My router:

const router = new VueRouter({
  mode: 'history',
  routes,
})

After reading the documentation, they announce a very simple solution, a file .htaccess , with this we can eliminate the error 404, but the problem is that it always sends you to the initial path (component) and Routing is not respected.

The .htaccess file:

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

For example: My initial route is:

website.cl/inicio

and I want to refresh the browser in:

website.cl/productos/2/detalle

Normally I would have a 404, since / products / 2 / detail does not exist on the server, with the file .htaccess when refreshing I would not have a 404, but I it would take / home and not the place where I am refreshing / products / 2 / detail

How can I solve this problem?