How to serve VueJS 3 app from subfolders in NGINX? - vue.js

Question

I want to serve multiple VueJS 3 apps from same NGINX server but from different subfolders. I've stumbled upon and tried myriad resource from stack and web but things are not coming together.
I have three apps and three build types.
production: mydomain.com/app1, mydomain.com/app2, mydomain.com/app3
staging: mydomain.com/staging/app1, mydomain.com/staging/app2, mydomain.com/staging/app3
dev: mydomain.com/dev/app1, mydomain.com/dev/app2, mydomain.com/dev/app3
I've tried modifying the vue.config.js, router/index.js and NGINX configuration but nothing seems to click.
I'll sincerely appreciate if someone can share a comprehensive guide to my issue.
Thank you.

Answer 1

try this conf
server {
listen 80;
listen [::]:80;
# SSL configuration
#
#listen 443 ssl;
#listen [::]:443 ssl;
#ssl_certificate /etc/letsencrypt/live/your-domain/fullchain.pem;
#ssl_certificate_key /etc/letsencrypt/live/your-domain/privkey.pem;
#
#ssl_dhparam /etc/letsencrypt/live/dhparam/dhparam.pem;
#ssl_protocols TLSv1.2;
#ssl_prefer_server_ciphers on;
#ssl_ciphers 'ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:DHE-RSA-AES256-SHA';
#add_header X-Frame-Options DENY;
root /var/www/proyect-vue/dist;
# Add index.php to the list if you are using PHP
index index.html index.htm index.php;
server_name your-domain;
location / {
try_files $uri $uri/ /index.html;
}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
location ~ /\.ht {
deny all;
}
}
and now, you can clone repository in /var/www/ with git and type npm run build