关于nginx同域名同端口布置多个history模式的VUE项目带http

在Nginx中，同一域名下部署多个Vue项目的常见场景是通过路径别名（path alias）配合history模式来实现。当你需要在同一域名(`example.com`)和同一端口(`80`或`443`)上运行两个或更多的Vue应用，可以这样做：

1. **配置Nginx**:
在Nginx服务器的配置文件中，为每个Vue应用创建一个新的location块，并指定对应的目录。例如，如果你有两个应用分别对应`/app1`和`/app2`，你可以这样设置：

   location /app1 {
       alias /path/to/app1/dist;
       try_files $uri $uri/ @vue_app1;
   }

   location @vue_app1 {
       root /path/to/app1/dist;
       if (!-e $request_filename) {
           rewrite ^(.*)$ /index.html last;
           break;
       }
   }

   location /app2 {
       alias /path/to/app2/dist;
       try_files $uri $uri/ @vue_app2;
   }

   location @vue_app2 {
       root /path/to/app2/dist;
       if (!-e $request_filename) {
           rewrite ^(.*)$ /index.html last;
           break;
       }
   }

这里`try_files`用于处理非静态请求，`rewrite`规则则是为了让history模式工作，将所有请求重定向到`index.html`。

2. **Vue项目配置**:
在Vue应用中，确保你已经设置了`base`字段指向实际的应用根路径，如`/app1`或`/app2`。这通常可以在`public/index.html`或`src/router/index.js`中完成。

3. **HTTP vs HTTPS**:
如果你同时支持HTTP和HTTPS，记得在Nginx配置中为HTTPS添加相应的SSL证书和监听端口，比如：

   server {
       listen 80;
       server_name example.com;
       # HTTP配置...
       # 更改为443并添加SSL配置 for HTTPS:
       listen 443 ssl;
       ssl_certificate /path/to/your.crt;
       ssl_certificate_key /path/to/your.key;
       # ...其他HTTPS配置
   }