So wechseln Sie zwischen Vue-Produktions- und Entwicklungsumgebungen und verwenden Filter

1. Wechseln Sie zwischen Produktionsumgebung und Entwicklungsumgebung

Entwicklungsumgebung: Die Entwicklungsumgebung ist die Konfiguration von proxyTable unter /config/index.js
Produktionsumgebung: Der Proxy wird nach dem Verpacken des Projekts ungültig und muss daher in der Produktionsumgebung neu konfiguriert werden.

Die erste Methode: durch Konfigurieren der .env-Datei

Referenz: https://cli.vuejs.org/zh/guide/mode-and-env.html

Zweite Methode

Schritt 1: Erstellen Sie verschiedene Umgebungs-JS-Dateien und wechseln Sie sie über Cross-Env

 Konfiguration
    dev.js    
    prod.js
  
dev.js
modul.exporte = {
  BASE_URL: "https://test.365msmk.com"
};

prod.js

modul.exporte = {
  BASE_URL: "https://www.365msmk.com"
};

Schritt 2: Installieren Sie cross-env und konfigurieren Sie die in package.json zu übergebenden Parameter

Installationsanweisungen: npm install cross-env -D


Konfiguration in package.json

"Skripte": {
    "servieren": "umgebungsübergreifend BUILD_ENV=dev vue-cli-service servieren",
    "Build": "Umgebungsübergreifendes BUILD_ENV=prod vue-cli-service-Build"
  }

Schritt 3: Ändern Sie vue.config.js, um eine Konfiguration für Webpack hinzuzufügen

modul.exporte = {
 .....
  chainWebpack: Konfiguration => {
    config.plugin("definieren").tap(args => {
      args[0]['Prozess.Umgebung'].BUILD_ENV = JSON.stringify(Prozess.Umgebung.BUILD_ENV);
      Argumente zurückgeben;
    });
  }
};

Wechseln Sie die Umgebung im Geschäftscode

//Lesen Sie BUILD_ENV im konstanten Objekt process.env
const envType = Prozess.Umgebung.BUILD_ENV;

const urlObj = erfordern(`../config/${envType}.js`);

//Eine Axios-Instanz erstellen const service = axios.create({
  Basis-URL: urlObj.BASE_URL + vipUrl
});

2. Filter

1. Globale Filterdefinition:

Vue.filter('Filtername',Funktion(a,b,c) {
  //....
  
 zurückkehren ...

})

verwenden:

{{ num | Filtername (v1, v2) }}

2. Lokaler Filter

3. Zusammenfassung: Filterverwendungsszenarien: Wird verwendet, um Hintergrunddaten in das Datenformat zu verarbeiten, das Benutzer letztendlich anzeigen werden

Zum Beispiel: Geschlecht, Zahlungsstatus, Logistikstatus, Zeitstempel. . . . . .

3. Nutzung der Momentzeitbibliothek

Offizielle Moment-Website: momentjs.cn/docs/

Installationsanleitung: npm i moment

Format: Moment (Zeitstempel).Format("JJJJ Jahr MM Monat TT Tag, HH Stunde mm Minute SS Sekunde");

Anzeigeformat: http://momentjs.cn/docs/#/displaying/

Ich arbeite derzeit hart daran, die Entwicklungsumgebung und die Produktionsumgebung kennenzulernen, jeden Tag eine Zusammenfassung zu erstellen, jeden Tag Fortschritte zu machen und so schnell wie möglich ein Marktführer in der IT-Branche zu werden.

Damit ist dieser Artikel zum Wechseln zwischen Vue-Produktions- und Entwicklungsumgebungen und zur Verwendung von Filtern abgeschlossen. Weitere Informationen zum Wechseln zwischen Vue-Produktions- und Entwicklungsumgebungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!