Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
NGiNX Configuration for Vue-Router in HTML5 Mode
server {
listen 80 default_server;
listen [::]:80 default_server;
root /your/root/path;
index index.html;
server_name you.server.com;
location / {
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.+)$ /index.html last;
}
location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
# Some basic cache-control for static files to be sent to the browser
expires max;
add_header Pragma public;
add_header Cache-Control "public, must-revalidate, proxy-revalidate";
}
}
@soarpatriot

This comment has been minimized.

Copy link

commented Feb 28, 2017

good, thanks

@soarpatriot

This comment has been minimized.

Copy link

commented Feb 28, 2017

@raymondzhaoy

This comment has been minimized.

Copy link

commented Mar 7, 2017

@szarapka nice, thanks !

@CarlosBolanos

This comment has been minimized.

Copy link

commented Mar 21, 2017

@szarapka thanks!

@PierreCavalet

This comment has been minimized.

Copy link

commented May 18, 2017

@szarapka thanks !

@vinisba

This comment has been minimized.

Copy link

commented May 18, 2017

Thanks works fine!

@CanRau

This comment has been minimized.

Copy link

commented May 19, 2017

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

should do the same (https://router.vuejs.org/en/essentials/history-mode.html) ;-)

@bodinsamuel

This comment has been minimized.

Copy link

commented May 28, 2017

thanks :)

@ralphchristianeclipse

This comment has been minimized.

Copy link

commented Aug 16, 2017

throws errors
image

@paulvanbladel

This comment has been minimized.

Copy link

commented Sep 1, 2017

Interesting.
Can someone explain what following nginx config is doing exactly?

    # Some basic cache-control for static files to be sent to the browser
    expires max;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
  }
@paulvanbladel

This comment has been minimized.

Copy link

commented Sep 1, 2017

Anyhow, when using Nginx make sure to configure webpack with output.publicPath='/', otherwise your app will fail on subpaths with multiple parameters.

@jcamilorm902

This comment has been minimized.

Copy link

commented Sep 4, 2017

Thanks! @szarapka @CanRau

@marcusmourao

This comment has been minimized.

Copy link

commented Nov 10, 2017

I'm getting this error. Can ypu please help me?

directory index of "/usr/share/nginx/html/" is forbidden

@tomasz-lasko

This comment has been minimized.

Copy link

commented Dec 12, 2017

The gist works good, but this caching is not good for progressive apps (PWA), at least the Service Worker should not be cached.

More details: https://github.com/vuejs-templates/pwa#whats-not-included

Example case: facebook/create-react-app#3372

Some additional inspirations here: https://jakearchibald.com/2016/caching-best-practices/

@nulldreams

This comment has been minimized.

Copy link

commented Jun 20, 2018

Thank you <3

@liangliangyy

This comment has been minimized.

Copy link

commented Jul 2, 2018

I'm getting this error. can you please help me?

2018/07/02 14:26:01 [error] 5#5: *25 rewrite or internal redirection cycle while redirect to named location "@rewrites"
@vesper8

This comment has been minimized.

Copy link

commented Jul 6, 2018

@tomasz-lasko would you mind sharing a better version that properly handles the service worker ?

i'm still looking for the definitive version of the nginx config for vue-cli pwa apps

@kevrat

This comment has been minimized.

Copy link

commented Jul 8, 2018

Getting to many redirects. But i use it as backend for https://github.com/jwilder/nginx-proxy with https by https://github.com/JrCs/docker-letsencrypt-nginx-proxy-companion
SOLUTION:
Ok, it is my bad. I use envsubst, so it is just replace all my $uri.
Solution is here: docker-library/docs#496
You just need to envsubst '$YOUR_VAR' < or envsubst '$$YOUR_VAR' < if you use docker-compose and envsubst replace only specified vars.

@ssuess

This comment has been minimized.

Copy link

commented Jul 12, 2018

Thanks!!

@arsenijesavic

This comment has been minimized.

Copy link

commented Jul 27, 2018

million thanks!!

@elviskudo

This comment has been minimized.

Copy link

commented Sep 6, 2018

hi i have same error like @ralph
can you help me please?

@jimmy18dev

This comment has been minimized.

Copy link

commented Oct 8, 2018

Thank You!

@iihres

This comment has been minimized.

Copy link

commented Oct 25, 2018

@elviskudo, @ralph I received the same errors. The decision wrote above @paulvanbladel. Need to configure Webpackconfig output.publicPath = '/'. Search file like webpack.config.js or webpack.prod.config.js

@aebrs

This comment has been minimized.

Copy link

commented Dec 3, 2018

Any idea how to deploy vue.js dest build folder on a windows 2012 server with running Nginx?
User code above in nginx.conf, it show only index.html page and js plus css are not effecting the page , without any error.

worker_processes 1;

events {
worker_connections 1024;
}

http {
index index.html index.htm;
sendfile on;
keepalive_timeout 65;

client_header_timeout 3000;
client_body_timeout 3000;
fastcgi_read_timeout 3000;
client_max_body_size 32m;
fastcgi_buffers 8 128k;
fastcgi_buffer_size 128k;

server {
listen 80 default_server;
listen [::]:80 default_server;
root ../Ebrahimi/www/order;
index index.html;
server_name order.parsorder.com;
location / {
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.+)$ /index.html last;
}
location ~* .(?:ico|css|js|gif|jpe?g|png)$ {
expires max;
add_header Pragma public;
add_header Cache-Control "public, must-revalidate, proxy-revalidate";
}
}

}

Thanks.

@lorainwings

This comment has been minimized.

Copy link

commented Dec 22, 2018

mark

@inmyth

This comment has been minimized.

Copy link

commented Jan 3, 2019

Actually if the Vue app is run as dev (npm run dev) then you can refresh pages without nginx configuration. Just add this line in webpack.config.js

devServer: {
  disableHostCheck: true,  
  ...
 }  

There's a small payload cost of all string / debug outputs for running as dev though

@globax89

This comment has been minimized.

Copy link

commented Jan 22, 2019

Thanks! Very useful!

@kumjShid4

This comment has been minimized.

Copy link

commented Apr 21, 2019

Thanks you!

@reneclavijo

This comment has been minimized.

Copy link

commented May 4, 2019

Thank you! You saved me!

@vikyd

This comment has been minimized.

Copy link

commented May 10, 2019

not working when having alias in location

@BonBonSlick

This comment has been minimized.

Copy link

commented Aug 21, 2019

NOT working!
Refused to execute script from 'https://123123.tv/video/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

With


  location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    # Some basic cache-control for static files to be sent to the browser
    expires max;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
  }

ERROR
rocket-loader.min.js:1 GET https://123123.tv/video/main.js net::ERR_ABORTED 404

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.