So stellen Sie mit Nginx mehrere Vue-Projekte unter demselben Domänennamen bereit und verwenden einen Reverse-Proxy

//Projekt1
modul.exporte = {
 Entwickler: {},
 bauen: {
  assetPublicPath: '/project1/' // Beachten Sie das führende und nachfolgende '/'
 }
}

//Projekt2
modul.exporte = {
 Entwickler: {},
 bauen: {
  assetPublicPath: '/project2/' // Beachten Sie das führende und nachfolgende '/'
 }
}

//Projekt1
modul.exporte = {
 NODE_ENV: '"Produktion"',
 BASE_API: '"/api/pro1"' // Dies entspricht später der nginx-Konfiguration}

//Projekt2
modul.exporte = {
 NODE_ENV: '"Produktion"',
 BASE_API: '"/api/pro2"' // Dies entspricht später der nginx-Konfiguration}

// Ich habe den Verlaufsmodus verwendet, den Hash-Modus habe ich nicht getestet, ich denke, er sollte den gleichen Effekt haben // project1
exportiere standardmäßig einen neuen Router({
 Basis: '/project1/', // Beachten Sie, dass Sie Ihren Unterprojektnamen ändern müssen, dies entspricht Ihrem build.assetsPublicPath
 Modus: "Verlauf",
 scrollBehavior: () => ({ y: 0 }),
 Routen: []
})

//Projekt2
exportiere standardmäßig einen neuen Router({
 Basis: '/project2/', // Beachten Sie, dass Sie Ihren Unterprojektnamen ändern müssen, dies entspricht Ihrem build.assetsPublicPath
 Modus: "Verlauf",
 scrollBehavior: () => ({ y: 0 }),
 Routen: []
})

# Diese Version ist die Version in Ihrem package.json, aber Sie müssen diese Version erneut angeben$ npm i [email protected] -D

.
├─conf
│ ├─... # Andere Dateien│ └─nginx.conf
│
├─html # Schau einfach hier, die anderen benutze ich im Moment nicht│ ├─project1
│ │ └─statisch
│ │ ├─css
│ │ ├─Schriftarten
│ │ └─js
│ │ ├─g
│ │ └─V
│ ├─Projekt2
│ │ └─statisch
│ │ ├─css
│ │ ├─Schriftarten
│ │ └─js
│ │ ├─g
│ │ └─V
│ ├─index.html
│ └─50x.html
└─... # Andere Dateien

# ...
# Reverse-Proxy http {
  mime.types einschließen;
  Standardtyp Anwendung/Oktett-Stream;

  #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
  # '$status $body_bytes_sent "$http_referer" '
  # '"$http_user_agent" "$http_x_forwarded_for"';

  sendfile an;
  KeepAlive-Timeout 65;

  Maximale Client-Körpergröße: 20 M;
  Client-Body-Puffergröße 10 M;
  große_Client_Header_Puffer 4 128k;
  
  # Dies kann als Cluster-Upstream p1_server { verwendet werden
    Server localhost:8081;
  }

  # Dies kann als Cluster-Upstream p2_server { verwendet werden
    Server localhost:8082;
  }

  Server {
    hören Sie 8080;
    Servername localhost;
    Zeichensatz UTF-8;

    Proxy_Verbindungs-Timeout 180;
    Proxy_Sendezeitüberschreitung 180;
    Proxy_Lese_Timeout 180;
    Proxy_Set_Header Host $host;
    proxy_set_header X-Forwarder-Für $remote_addr;

    root html; # Hier geben wir unseren Ordner an. # Die gesamte Projektroute. Ich war faul und habe sie direkt in dieselbe Datei geschrieben. # Wenn es viele gibt, können Sie mehrere Conf-Dateien konfigurieren und sie mithilfe von „Include“ verknüpfen. location / {
      try_files $uri $uri/ /index.html; # Hier können Sie verstehen, dass es sich um die Datei index.html im html-Ordner handelt
    }
    
    #projekt1
    # Hier ist die build.assetsPublicPath-Konfiguration von config/index.js im Vue-Projekt.
    # Es ist auch die Basis des im Vue-Projekt konfigurierten Routers
    Standort ^~ /Projekt1 {
      try_files $uri $uri/ /project1/index.html; # Hier können Sie verstehen, dass es auf die index.html des Ordners project1 unter dem Ordner html angegeben ist
    }
    
    #projekt2
    # Hier ist der Konfigurationsort von Projekt 2 ^~ /project2 { # 
      try_files $uri $uri/ /project2/index.html; # Hier können Sie verstehen, dass es auf die index.html des Ordners project2 unter dem Ordner html angegeben ist
    }
    
    # Hier ist die Schnittstelle, die project1 für die Konfiguration aufrufen muss location /api/pro1 { # Hier ist die Konfiguration BASE_API von prod.env.js im Vue-Projekt 
      Proxy_Redirect aus;
      Proxy_Set_Header Host $host;
      Proxy_Set_Header X-Real-IP $Remote_Addr;
      proxy_set_header X-Weitergeleitet-Für $proxy_add_x_forwarded_for;
      proxy_pass http://p1_server; # Der p1_server hier entspricht der obigen Konfiguration upstream p1_server {}, hier können Sie Clustering durchführen, ich brauche es nicht, also konfiguriere ich es einfach}
    
     # Hier ist die Schnittstelle, die project1 für die Konfiguration aufrufen muss location /api/pro2 { # Hier ist die Konfiguration BASE_API von prod.env.js im Vue-Projekt
      Proxy_Redirect aus;
      Proxy_Set_Header Host $host;
      Proxy_Set_Header X-Real-IP $Remote_Addr;
      proxy_set_header X-Weitergeleitet-Für $proxy_add_x_forwarded_for;
      proxy_pass http://p2_server; # Der p2_server hier entspricht der obigen Konfiguration upstream p2_server {}, hier können Sie Clustering durchführen, ich brauche es nicht, also konfiguriere ich es einfach}

    # ...
  }

  # ...
}

...
<p><em>Vielen Dank, dass Sie nginx verwenden.</em></p> <!-- Für Anzeigeort-->

<!-- start: anhängen -->
<hr>
<a href="/project1" rel="external nofollow" >Projekt 1</a> | <a href="/project2" rel="external nofollow" >Projekt 2</a>
<!-- Ende: Anhängen-->

</body> <!-- Für Anzeigezwecke -->