How to serve a VueJS 3 application from a subfolder in NGINX?

Question

I want to serve multiple VueJS3 applications from the same NGINX server but different subfolders. I've stumbled across and tried countless resources from stack and the web but things just don't come together. I have three applications and three build types. Production: mydomain.com/app1, mydomain.com/app2, mydomain.com/app3 Staging: mydomain.com/staging/app1, mydomain.com/staging/app2, myd

P粉940538947 · Answer

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;
    }
}

Now you can use git to clone the repository in /var/www/ and enter npm run build