Wie kann eine VueJS 3-Anwendung aus einem Unterordner in NGINX bereitgestellt werden?

Question

Ich möchte mehrere VueJS 3-Anwendungen vom selben NGINX-Server, aber unterschiedlichen Unterordnern bereitstellen. Ich bin über unzählige Ressourcen von Stack und dem Web gestolpert und habe sie ausprobiert, aber es passt einfach nicht alles zusammen.

Ich habe drei Anwendungen und drei Build-Typen.

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

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

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

Ich habe versucht, die Konfiguration von vue.config.js, router/index.js und NGINX zu ändern, aber nichts scheint zu funktionieren.

Ich wäre sehr dankbar, wenn mir jemand eine umfassende Anleitung zu meinem Problem geben könnte.

Vielen Dank.

Answer 1

试试这个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;
    }
}

现在，您可以使用 git 克隆 /var/www/ 中的存储库并输入 npm run build