Bagaimana untuk menyampaikan aplikasi VueJS 3 dari subfolder dalam NGINX?

Question

Saya ingin menyediakan berbilang aplikasi VueJS 3 daripada pelayan NGINX yang sama tetapi subfolder berbeza. Saya telah terjumpa dan mencuba sumber yang tidak terkira banyaknya daripada timbunan dan web tetapi perkara tidak dapat disatukan.

Saya mempunyai tiga aplikasi dan tiga jenis binaan.

Pengeluaran: mydomain.com/app1, mydomain.com/app2, mydomain.com/app3

Pementasan: mydomain.com/staging/app1, mydomain.com/staging/app2, mydomain.com/staging/app3

Pembangunan: mydomain.com/dev/app1, mydomain.com/dev/app2, mydomain.com/dev/app3

Saya cuba mengubah suai konfigurasi vue.config.js, router/index.js dan NGINX, tetapi nampaknya tiada apa yang berjaya.

Saya akan sangat berterima kasih jika seseorang boleh berkongsi panduan komprehensif untuk masalah saya.

Terima kasih.

Answer 1

Cuba conf ini

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

Kini anda boleh menggunakan git untuk mengklon repositori dalam /var/www/ dan taip npm run build