How to use vue.js with Nginx?

Question

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?

Answer 1

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: [...] })