How to enable HTML5 History Mode?

Question

Level 1

4 points

How to enable HTML5 History Mode?

Hi,

I'm struggling to enable How to enable HTML5 History Mode for my vue2 based single page application as described here https://router.vuejs.org/en/essentials/history-mode.html

When I apply the below lines in the config of the website, none of the hosted websites are reachable anymore 😟

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

Xserve, OS X El Capitan (10.11.6)

Posted on Dec 13, 2017 3:03 AM

Reply

Answer 1

Best reply

srune Author

Level 1

4 points

Dec 13, 2017 4:17 AM in response to srune

Just found the (obvious?) solution after spinning around this yesterday.

Thought I'd share this:

In Server App settings page for the website select "Edit Advanced Settings..."

Enable "Allow overrides using .htaccess files"

In the root folder of the website, create a file by the name .htaccess

Edit the .htaccess file and enter below lines for the history mode to work:

RewriteEngine On

RewriteBase /

RewriteRule ^index\.html$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.html [L]

</IfModule>

Reply