Vue History Mode routing Nginx config example

README.md

HTML5 History Mode

The default mode for Vue Router is hash mode. It uses a URL hash to simulate a full URL so that the page won’t be reloaded when the URL changes.

We can set Vue Router to history mode to get rid of the hash. It uses history.pushState API to let us navigate URLs without a page reload.

This configuration allows you to configure nginx to work with Router History on the server side.

nginx.conf

server {
	server_name mysite.com;
	listen 80;

  charset utf-8;
  
  root /var/www; 

  location @rewrites {
    rewrite ^/(.*)$ /index.html last;
  }

  location / {
    charset utf-8;
    try_files $uri $uri/ @rewrites;
  }
}