What server settings are needed for SPA?

Question

Vue.js

I have a Vue SPA application using mode: 'history' in VueRouter. Locally, everything goes well on "other villages". I uploaded it to the hosting, it gives a 404 error when switching to any other route (/about)

How can I make the hosting always give me my only page when switching to other routes?

Answer 1

Here is the documentation for VueRouter just for my question
https://router.vuejs.org/guide/essentials/history-...
Add to .htaccess to redirect to index.html

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

Answer 2

If you are using Laravel, you can route all requests through routes:

Route::get('{any}', function() {
  return view('spa');
})->where('any', '.*');

In this case, you can register other routes at a higher level:

Route::get('/api/v1/products', function() {
  return 'some api handler...';
});

Route::get('{any}', function() {
  return view('spa');
})->where('any', '.*');