How to use vue.js with Nginx?

Add the following code to your Nginx Config:

location / {  try_files $uri $uri/ /index.html;}

the following snippet has been taken from vue-router docs, which is here.

Also, you need to enable history mode on VueRouter:

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

I struggled with same problem. But I found how can I do. You just add this to your nginx.conf.

location / {    root /home/admin/web/domain.com/public_html/;  #-> index.html location    index index.html;    include  /etc/nginx/mime.types;    try_files $uri $uri/ /index.html;}

This worked for me:

location /static/ {    root /root/bdn/bdn/server/;}location /media/ {    root /root/bdn/bdn/server/;}location ^~ /admin/ { # Define routes to be directed to backend as proxy    proxy_set_header Host $http_host;    proxy_set_header X-Real-IP $remote_addr;    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;    proxy_set_header X-Forwarded-Proto $scheme;    proxy_pass http://unix:/run/gunicorn.sock;}location ^~ /api/ { # Define routes to be directed to backend as proxy    proxy_set_header Host $http_host;    proxy_set_header X-Real-IP $remote_addr;    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;    proxy_set_header X-Forwarded-Proto $scheme;    proxy_pass http://unix:/run/gunicorn.sock;}location ^~ /api-auth/ {    proxy_set_header Host $http_host;    proxy_set_header X-Real-IP $remote_addr;    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;    proxy_set_header X-Forwarded-Proto $scheme;    proxy_pass http://unix:/run/gunicorn.sock;}location ^~ /{    root /root/bdn/bdn/server/templates/;    index index.html;}error_page 404 /; # PARTICULARLY THIS ERROR REDIRECTION