如何从 NGINX 中的子文件夹提供 VueJS 3 应用程序？

Question

我想从同一 NGINX 服务器但不同的子文件夹提供多个 VueJS 3 应用程序。我偶然发现并尝试了来自堆栈和网络的无数资源，但事情并没有整合在一起。

我有三个应用程序和三种构建类型。

生产：mydomain.com/app1、mydomain.com/app2、mydomain.com/app3

暂存：mydomain.com/staging/app1、mydomain.com/staging/app2、mydomain.com/staging/app3

开发：mydomain.com/dev/app1、mydomain.com/dev/app2、mydomain.com/dev/app3

我尝试修改 vue.config.js、router/index.js 和 NGINX 配置，但似乎没有任何效果。

如果有人可以分享针对我的问题的全面指南，我将不胜感激。

谢谢。

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