How can I set up nginx to solve 404 not found on static file vue?

Question

I using nginx to run my project. So I install nginx to my localhost to testing it

My configuration nginx on localhost like this :

location / {
    root   html;
    index  index.html index.htm;
}

If I refresh a page, it exist error like this :

404 Not Found
nginx/1.14.0 (Ubuntu)

I search on google and I get some reference. I try like this :

location / {
    root /www/dist;
    try_files $uri /index.html;
}

I works. There is no error

Then I deploy my project to production

My configuration nginx on production like this :

location / {
    root /www/dist;
    try_files $uri /index.html;
}

It works too

But my problem is I need to change the location to be like this :

location /startup {
    root /www/dist;
    try_files $uri /index.html;
}

I have a lot of projects in the nginx. So I have to add /startup to show that it's startup project. But it makes error like this :

404 Not Found
nginx/1.14.0 (Ubuntu)

How can I solve this problem?

I was running 2 Vue sites under the same Nginx (one a subdomain). Neither of them worked on refresh, until I removed all instances of 'index', 'root' and 'try_files' from the conf file, leaving only 'root [dir]' and 'try_files' like above in both 'location /' sections. — Quin
– Quin, Commented May 14 at 14:50

Dan · Accepted Answer · 2020-02-26 12:26:54Z

1

When you use root in nginx, it always appends the route to the end of the file path but that's not obvious when using /. So in your first examples with location /, it searches for this path on the server:

root + /www/dist + /

But when you use location /startup, it looks for this path which does not exist:

root + /www/dist + /startup

So to use both root and "/startup", you would need a directory called "startup". But, you can use alias. Try this:

location /startup {
    alias /www/dist;
    try_files $uri $uri/ /startup/index.html;
}

The Vue Router docs recommend something similar to this as well. (But they don't show how to use a subfolder alias.)

edited Feb 26, 2020 at 12:26

answered Feb 22, 2020 at 16:17

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

moses toh Over a year ago

I try like this : location /startup/ { alias /www/dist; try_files $uri /index.html; }. But it does not works. It's the same

moses toh Over a year ago

I use try_files to solve 404 Not Found. If I don't use it, seems it does not works

moses toh Over a year ago

I had try it on my localhost and it works. But later I will try that on a production server. If it works i will accept your answer

Dan Over a year ago

Anything good in me is God's doing, thanks for your encouragement. I linked the Vue Router docs and adjusted the answer slightly to match the way the docs suggest, using alias.

Dan Over a year ago

Yes, still alias. The only difference now is using both $uri $uri/ instead of just $uri

|

Collectives™ on Stack Overflow

How can I set up nginx to solve 404 not found on static file vue?

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related