1. Anforderungen:
Der Kunde verlangt, dass die Front-End- und Back-End-Codes auf unterschiedlichen Servern bereitgestellt werden. Je nach Server kann der Domänenname geändert werden, um den Effekt des Schnittstellenwechsels zu erzielen. Es besteht keine Notwendigkeit, den Domänennamen des Servers zu ändern Dies führt dazu, dass der Front-End-Code erneut mehrmals gepackt wird.
2. Analyse:
Verschiedene Server: Der erste Front-End-Code, der dem Benutzer gegeben wird, ist der Dist-Ordner, der vom Front-End generiert wird, auf dem npm run build in vscode ausgeführt wird. Da aufgrund der Änderung der Serverdomäne kein Paket des Front-End-Codes erforderlich ist name, nach dem Packen muss ein unabhängiger dist-Ordner vorhanden sein. Dateien zum Ändern unterschiedlicher Domänennamen je nach Benutzerserver;
Verschiedene Umgebungen: Im Allgemeinen verfügt ein Projekt über drei Umgebungen (dev (Entwicklungsumgebung), fat ((Testumgebung) (einige werden auch uat genannt) und Produktionsumgebung);
Um die beiden oben genannten Situationen zu verstehen, können Sie die folgenden Anweisungen lesen.
3. Verwendetes Frontend-Framework:
Ansicht2
4. Projektdateistruktur
5. Lösung:
5.1. Erstellen Sie zunächst eine neue Datei config.js im öffentlichen Ordner. Diese Datei muss in die Datei index.html im öffentlichen Ordner und über dem HTML eingefügt werden, um die vorrangige Ausführung von HTML zu erleichtern.
config.js文件
// 说明:
// 服务器域名更改: 如服务器域名更改为http://test/api,则
// var Api_CONFIG = "http://test/api"index.html
<!DOCTYPE html>
<html lang="cn">
<head>
<script src="./config.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">5.2. Schreiben Sie die entsprechenden Umgebungsdomänennamen in die drei Umgebungsdateien in 4. Projektdateistruktur (hier durch Test ersetzt)
5.2.1. In der Datei .env.dev
NODE_ENV = 'dev'
# base api
VUE_APP_BASE_URL = "http://test/api" // 开发环境5.2.2. In der .env.fat-Datei
NODE_ENV = 'fat'
# base api
VUE_APP_BASE_URL = "http://test/api" // 测试环境5.2.3. In der Datei .env.prod
NODE_ENV = 'prod'
# base api
VUE_APP_BASE_URL = "http://test/api" // 生产环境6. In der Datei „setting.js“ im Stammverzeichnis
const baseApi = process.env.VUE_APP_BASE_URL // process.env是nodejs的顶层对象，可以在main.js内输出看一下7. Legen Sie den angeforderten Basispfad in der Anforderungsdatei fest
import { baseApi } from "../../settings";
const API = window.Api_CONFIG || baseApi
axios.defaults.baseURL = process.env.NODE_ENV === 'dev' ? baseApi : API,
解读：
当window.Api_CONFIG有值的话，就等于API（window.Api_CONFIG是来源于config.js文件的用户填写的域名），或者就是setting.js文件内的baseApi，而baseApi是根据process.env（nodejs进程的环境）对象内的VUE_APP_BASE_URL值，而VUE_APP_BASE_URL的值是根据NODE_ENV是dev、fat、还是prod来决定的8. Der Front-End-Code sollte vor der Bereitstellung über einen Proxy angefordert werden. Zu diesem Zeitpunkt müssen Sie daher den Proxy in der Datei vue.config.vue auskommentieren und dann dev erneut mit npm ausführen oder das Projekt bereitstellen.
8.1. Wenn der Proxy auskommentiert ist, ist die Anfrage dann nicht domänenübergreifend? Natürlich ist es domänenübergreifend. Wenn also eine Back-End-Bereitstellung erforderlich ist, ist eine domänenübergreifende Bereitstellung zulässig.