vue.js - 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 :)

Answer 1

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!