Detaillierter Prozess der Vue-Front-End-Verpackung

1. Verpackungsbefehl hinzufügen

Konfiguration zu package.json hinzufügen
Der von npm run build online veröffentlichte Code ist nicht einfach zu debuggen

Befehl:

• ①npm run build:dev Entwicklungs- und Debugging-Umgebung
• ②npm run build:prod Online-Debugging-Umgebung

 "build:dev": "vue-cli-service build --mode dev",
    „Build:prod“: „vue-cli-service build --Modus prod“

2. Führen Sie den gepackten Code aus

Doppelklicken Sie nicht direkt dist/index.html
Muss im HTTP-Container ausgeführt werden: serve tomcat nginx iis
Dieses Mal verwenden serve

Server herunterladen: npm i -g serve

Fehler:

Fehler: EPERM: Vorgang nicht zulässig, mkdir „C:\Programme\nodejs\node global\node_modules.staging“

Lösung: Benutzer -> Persönlicher Benutzer -> .npmrc Datei löschen

Starten Sie das gepackte Verzeichnis : serve dist

3. Verpacken und spezifizieren Sie verschiedene Umgebungsvariablen

Umgebungsvariablen hinzufügen:

• ① Entwicklung: Erstellen Sie eine .env.dev Datei im Stammverzeichnis (entspricht dem Modus in package.json).
• ② Online: Erstellen Sie eine .env.prod Datei im Stammverzeichnis (entspricht dem Modus in package.json).
  

Verwenden Sie process.env.NODE_ENV usw., wenn Sie Variablen dynamisch angeben müssen

// .env.dev
##Entwicklungsumgebung NODE_ENV=Entwicklung
##Variablen beginnen mit VUE_APP_ VUE_APP_URL=http://www.dev.com

// .env.prod
##Produktionsumgebung NODE_ENV=Produktion
VUE_APP_URL=http://www.prod.com

4. Benutzerdefinierte Dateien verpacken

• vuecli basiert auf webpack

• VueCli – Nullkonfiguration
• Keine Konfiguration erforderlich, Sie können vue.config.js angeben

npm run build:prod enthält keine Kommentare, Leerzeilen, Komprimierung usw.

4.1 Entfernen von Drittanbieterpaketen

Codeaufschlüsselung:

• ① Pakete von Drittanbietern: vue elementui axios usw.
• ② Entwicklungscode: von mir selbst geschrieben
  

Entfernen Sie Pakete von Drittanbietern: Verwenden Sie cdn von Drittanbietern (kostenlos oder kostenpflichtig).
Schritt:

• ① Suchen Sie die cdn Ressource des Drittanbieterpakets und fügen Sie sie zu public/index.html
hinzu public/index.html

• ② Löschen Sie den vorherigen import
• ③Konfigurieren Sie den Ausschluss von Drittanbieterpaketen in vue.config.js

modul.exporte = {
  //Öffne den relativen Pfad des Dateizugriffs Unabhängiger Projektzugriff über das Projektstammverzeichnis publicPath: './',
  // Beim Entwickeln benötigen Sie keine Online-Map --> stellen Sie Code-Mapping bereit, um das Debuggen des Codes zu erleichtern productionSourceMap: process.env.NODE_ENV == 'development' ? true: false,
  // Webpack konfigurieren
  konfigurierenWebpack: config => {
    // Konfiguration --- Vuecli-StandardkonfigurationObject.assign(config, {
      // Abhängige Pakete ausschließen (Externals): {
        vue: 'Ansicht'
      }
    })
  },
}

4.2 GZIP-Komprimierung

下載npm i -D compression-webpack-plugin

5. Verpackungsfehler:

FEHLER TypeError: Eigenschaft „tapPromise“ von undefined kann nicht gelesen werden
TypeError: Eigenschaft „tapPromise“ von undefined kann nicht gelesen werden

Fehlerursache: Das Gerüstkonfigurations-GZIP-Paket unterstützt diese Version nicht
Lösung: Verwenden Sie npm install [email protected] --save-dev
Konfigurieren in vue.config.js

Beim Verpacken werden Dateien mit der Endung gz generiert:

let CompressionWebpackPlugin = erfordern('compression-webpack-plugin')

konfigurierenWebpack: config => {
    let plugins = [
      neues CompressionWebpackPlugin({
        // Komprimierungsalgorithmus: 'gzip',
        // Test für komprimierte Datei anpassen: /\.js$|\.css$/,
        // Für Komprimierungsschwellenwert größer als 10k: 10240 
      })
    ]
    wenn (Prozess.Umgebung.NODE_ENV == 'Produktion') {
      config.mode = "Produktion"
      config.plugins = [...config.plugins, ...plugins]
    } anders {
      config.mode = "Entwicklung"
    }
  },

Browseransicht:

• Anforderungsheader: Accept-Encoding: gzip, deflate, br

• Antwortheader: Content-Encoding: gzip

Bereitstellungsmodus für die Verpackung:

Hash: Nach dem Verpacken wird dist direkt im HTTP-Container ausgeführt, was mit Online konsistent ist

Verlauf: Nach dem Verpacken wird die Gerüstaktualisierung nicht 404 sein, aber die Onlineaktualisierung wird 404 sein
Lösung: Der Front-End-Code muss zusammen mit dem Back-End bereitgestellt werden, und das Back-End ist für den Sprung zum Front-End verantwortlich

Dies ist das Ende dieses Artikels über den detaillierten Prozess der Vue-Frontend-Verpackung. Weitere relevante Inhalte zum detaillierten Prozess der Vue-Frontend-Verpackung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!