Nginx and Vuejs 3 configuration with baseurl and public path

Question

I have a VueJS app with a history mode. My website is example.com and the base URL of my app is my-app, and when you enter my app with example.com/my-app it works perfectly, you can navigate through pages. Unfortunately, when you try to access directly to a page with a particular route, I have a 404.

Here is my nginx conf:

...
server_name example.com;
root /var/www/apps;
index index.html
try_files $uri $uri/ /index.html;
...

I found the last line on the vueJS documentation.

Here is my router configuration:

const router = createRouter({
  base: process.env.VUE_APP_PUBLICPATH,
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

And the .env.production file:

NODE_ENV=production
BASE_URL=/my-app/
VUE_APP_PUBLICPATH=/my-app/

I thought I followed correctly the docs, it appears that's not the case because when I check the Nginx log, here is the error:

2020/12/31 17:05:21 [error] 21351#0: *16 open() "/var/www/apps/index.html" failed (2: No such file or directory), client: XXX.XXX.XXX.XXX, server: example.com, request: "GET /my-app/about HTTP/1.1", host: "example.com"

Could anyone give me a hand? Thanks in advance :)

just follow this question stackoverflow.com/questions/49072584/… — SefaUn
– SefaUn, Commented Aug 30, 2021 at 21:52

djcaesar9114 · Accepted Answer · 2021-01-01 14:25:31Z

2

I found the solution, editing my nginx conf file for the website:

...
server_name example.com
...

location /my-app/ {
  try_files $uri $uri/ /my-app/index.html;
}
...

As simples as that!

answered Jan 1, 2021 at 14:25

djcaesar9114

2,1472 gold badges30 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

Nginx and Vuejs 3 configuration with baseurl and public path

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related