Nginx-Front-End-Vorgänge auf demselben Domänennamen und demselben Port, um mehrere Vue-Projekte bereitzustellen

Szenen

Letzten Monat trafen wir unsere Back-End-Kollegen, die mehrere Vue-Projekte unter demselben Domänennamen und demselben Port bereitstellen mussten. Lassen Sie uns die Front-End-Operationen unserer beiden zu diesem Zeitpunkt aufzeichnen.
Wenn beispielsweise ein Produkt in drei Produktmodule unterteilt ist und drei Vue-Projekte unter demselben Domänennamen bereitgestellt werden sollen, lautet der
Zugriffspfad wie folgt:
xxx.xxx.com:8089/productA
xxx.xxx. com:8089/productB
xxx.xxx.com:8089/productC

Methode

Ich habe drei Vorgänge am Front-End ausgeführt und der Rest von Nginx wird vom Back-End verwaltet

1. Fügen Sie den folgenden Code zum Head-Tag der Datei public/index.html hinzu

<meata base="/productA/">

2. src/router/index.js-Datei

const createRouter = () => 
	new Router({
    
    
		base: '/productA/' // 这就是我们要添加的代码
	})

3.vue.config.js-Datei

publicPath: '/productA/' // publicPath改为要访问的域名后面跟的入口

Die anderen beiden Vue-Projekte werden aus demselben Grund in ProduktB und ProduktC geändert.
OK! Diese werden im Front-End-Vue-Projekt konfiguriert, und der Rest der Nginx-Konfiguration kann vom Back-End konfiguriert werden.