Vue-Paketierung und domänenübergreifende Bereitstellung

Vorwort

Bei der Projektentwicklung treten häufig domänenübergreifende Probleme auf. Da der von uns verwendete Domänenname nicht mit dem Domänennamen der Back-End-Schnittstelle übereinstimmt, treten domänenübergreifende Probleme auf. In der Entwicklungsumgebung können wir domänenübergreifende Probleme durch die Konfiguration eines Proxys lösen. Nach dem Packen und Bereitstellen müssen wir jedoch andere Methoden verwenden, um domänenübergreifende Probleme zu lösen. In diesem Artikel wird erläutert, wie Sie vue-cli3 zum domänenübergreifenden Paketieren und Bereitstellen verwenden.

1. Was ist Cross-Origin Resource Sharing (CORS) ist eine Einschränkung der Same-Origin-Richtlinie des Browsers, die verhindert, dass Webseiten Ressourcen aus anderen Quellen beziehen dasselbe Protokoll, denselben Domänennamen und dieselbe Portnummer. Wenn eine Anfrage von einem nicht ursprünglichen Quellpfad initiiert wird, lehnt der Browser die Anfrage ab.

2. Mehrere Modi der vue-cli3-Paketierung

In vue-cli3 ist die Paketierung in drei Modi unterteilt:

Testmodus (Build-Test)

Der Testmodus verpackt unseren Code in den ausführbaren Modus der Entwicklungsumgebung und Aktivieren Sie automatisch die Sourcemap-Debugging-Funktion.
1. 
   Build-Modus (Build-Prod)
Der Build-Modus komprimiert und verschleiert unseren Code und eignet sich für die Bereitstellung in einer Produktionsumgebung.
2. 
   Generierungs- und Vorschaumodus (Servieren)
Der Serviermodus aktualisiert unseren Code im laufenden Betrieb und stellt einen Vorschaudienst bereit, der für die Vorschau und das Testen während der Entwicklung geeignet ist.
3. 
   
3. Paketieren und Bereitstellen domänenübergreifender Lösungen

Beim Packen und Bereitstellen domänenübergreifender Lösungen müssen wir Nginx verwenden, um einen Reverse-Proxy durchzuführen und domänenübergreifende Probleme zu lösen.

nginx ist ein Hochleistungs-Webserver, der auf verschiedenen Betriebssystemen wie Windows, Linux und Mac ausgeführt werden kann. Es ist sehr leistungsstark und kann für Reverse-Proxy, Lastausgleich, Caching usw. verwendet werden.

Nginx installieren

1. In einer Linux-Umgebung können wir Nigix über den folgenden Befehl installieren:

sudo apt-get update
sudo apt-get install nginx

Nginx konfigurieren

Nach der Installation von Nginx müssen wir Nginx konfigurieren, um domänenübergreifende Probleme zu lösen.

Zuerst müssen wir die Nginx-Konfigurationsdatei finden, normalerweise in /etc/nginx/conf.d/default.conf. Wir öffnen die Nginx-Konfigurationsdatei mit dem folgenden Befehl:

sudo vim /etc/nginx/conf.d/default.conf

Dann suchen wir den Serverabschnitt wie folgt :

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        #access_log  /var/log/nginx/host.access.log  main;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ .php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ .php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /.ht {
        #    deny  all;
        #}
    }

Wir müssen den Reverse-Proxy unter dem Standortsegment konfigurieren, zum Beispiel:

location /api {
            proxy_pass http://192.168.0.100:8080; # 后端API地址
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_http_version 1.1;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
            proxy_send_timeout 600;
            proxy_buffer_size 64k;
            proxy_buffers 4 64k;
            proxy_busy_buffers_size 128k;
            proxy_temp_file_write_size 128k;
            # 解决跨域
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            # 缓存时间，单位秒。这里设置的是6小时
            expires 21600s;
            # 收到304响应后，再次请求的时间间隔
            proxy_cache_valid 200 304 12h;
        }

Dabei sollte die Adresse nach Proxy_Pass in Ihre Backend-API-Adresse geändert werden, und add_header löst das domänenübergreifende Problem.

Vue.config.js-Konfiguration ändern

In vue-cli3 können wir publicPath in vue.config.js konfigurieren, um die gepackten Dateien unabhängig vom Domänennamen zu machen. Die spezifische Konfiguration ist wie folgt:

module.exports = {
  publicPath: '',
  devServer: {
    // 设置跨域代理
    proxy: {
      '/api': {
        target: 'http://192.168.0.100:8080', // 后端API地址
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  chainWebpack: (config) => {
    config.optimization.delete('splitChunks');
  }
}

Unter Bei ihnen ist /api das Präfix der Backend-API-Adresse und die Zielkonfiguration ist die Backend-API-Adresse.

Paketierung und Bereitstellung

Nach der obigen Konfiguration können wir das Vue-Projekt verpacken und bereitstellen. Nachdem die Verpackung abgeschlossen ist, kopieren wir alle Dateien im Verzeichnis /dist in das Stammverzeichnis der Nginx-Konfiguration, normalerweise /usr/share/nginx/html, und starten dann den Nginx-Dienst neu:

sudo service nginx restart

An diesem Punkt Es ist uns gelungen, die vue-cli3-Paketierung und -Bereitstellung in allen Domänen zu implementieren.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit dem Nginx-Reverse-Proxy das domänenübergreifende Problem der Vue-cli3-Paketierung und -Bereitstellung lösen. Durch die obige Konfiguration können wir das domänenübergreifende Problem lösen und in der Produktionsumgebung bereitstellen. Natürlich müssen wir während des Bereitstellungsprozesses auf Sicherheitsprobleme achten, z. B. die Aktivierung von Benutzerzugriffsberechtigungen für Nginx usw. Natürlich können wir auch andere Methoden verwenden, um domänenübergreifende Probleme zu lösen, wie zum Beispiel: JSONP, WebSocket usw.

Das obige ist der detaillierte Inhalt vonVue-Paketierung und domänenübergreifende Bereitstellung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!