[FIXED] How to use vue.js with Nginx?

Issue

I want to build a single page application with Vue.js using Nginx as my webserver and a my own Dropwiward REST API. Moreover I use Axios to call my REST request.

My nginx config looks like

server {
    listen       80;
    server_name  localhost;

    location / {
        root     path/to/vue.js/Project;
        index    index.html index.htm;
        include  /etc/nginx/mime.types;
    }
    location /api/ {
        rewrite ^/api^/ /$1 break;
        proxy_pass http://localhost:8080/;
    }
}

Currently I can just call my localhost/api/path/to/rescource to get the the information from the backend.

I build the Front end with HTML and javascript(vue.js) which has worked so far. However when I want to build a single page application most tutorials mention node.js. How can I use Nginx instead?

Solution

Add the following code to your Nginx Config, as detailed in the VueRouter docs, here:

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

Also, you need to enable history mode on VueRouter:

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

Answered By - Daksh M.

Answer Checked By - David Marino (PHPFixing Volunteer)