Lösung für leere Seite nach Vue-Verpackung

Lösung für leere Seite nach Vue-Verpackung

1. Lösung für das Problem, dass die Seite leer ist, nachdem vue-cli das Projektpaket erstellt hat

Befehlszeilen-Eingabe: npm run build run build

Nach dem Verpacken gibt es im Projekt einen zusätzlichen Ordner „dist“, der unser gepacktes Projekt ist.

2. Nach Abschluss der Verpackung generiert die Konfiguration automatisch die Datei vue.config.js. Diese Datei ist sehr wichtig und Ihre Sammlung wert

Die Konfiguration ist wie folgt:

const path = require("Pfad");
const resolve = function(dir) {
  return path.join(__dirname, dir);
};
modul.exporte = {
  öffentlicher Pfad: process.env.NODE_ENV === "Produktion" ? "./" : "./",
  Ausgabeverzeichnis: "dist",
  assetDir: "statisch",
  lintOnSave: true, // Ob die eslint-Speichererkennung aktiviert werden soll productionSourceMap: false, // Ob beim Erstellen von Produktionspaketen eine sourceMap generiert werden soll
  chainWebpack: Konfiguration => {
    config.resolve.alias
      .set("@", auflösen("src"))
      .set("@v", lösen("src/views"))
      .set("@c", lösen("src/components"))
      .set("@u", lösen("src/utils"))
      .set("@s", resolve("src/service")); /* Alias-Konfiguration*/
    config.optimization.runtimeChunk("einzeln");
  },
  devServer: {
    // Host: "localhost",
    /* Lokale IP-Adresse*/
    //Host: "192.168.1.107",
    Host: "0.0.0.0", //LAN und lokaler Zugriffsport: "8080",
    heiß: wahr,
    /* Browser automatisch öffnen */
    offen: falsch,
    Überlagerung:
      Warnung: falsch,
      Fehler: wahr
    },
    /* Domänenübergreifender Proxy */
    Proxy: {
      "/api": {
        /* Ziel-Proxyserveradresse*/
        Ziel: "http://m260048y71.zicp.vip", //
        // Ziel: "http://192.168.1.102:8888", //
        /* Domänenübergreifendes Verwenden zulassen */
        changeOrigin: wahr,
        ws: wahr,
        PfadNeu schreiben: {
          "^/api": ""
        }
      }
    }
  }
};

Das dritte Problem: Der Inhalt kann in der Router-Ansicht nicht angezeigt werden. Routing-Verlaufsmodus

Die Gefahr besteht darin, dass die gepackte Datei leer ist, wenn Sie nach der Verwendung des Routers den Router-Verlaufsmodus ohne die Zusammenarbeit des Backends öffnen.
Lösung: Auskommentieren des Modus: Verlauf in router.js

Dies ist das Ende dieses Artikels zum Problem der leeren Seite nach der Vue-Verpackung. Weitere verwandte Inhalte zur leeren Vue-Verpackungsseite 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!

Das könnte Sie auch interessieren:
  • Vue+WebPack-Paketdatei 404 – Lösung für leere Seiten
  • Eine kurze Erläuterung, wie das Vue-Projekt verpackt und auf den Server übertragen wird
  • Vue3 hat keinen Konfigurationsordner und die Seite ist nach dem Verpacken leer

<<:  Kali Linux Installation VMware Tools Installationsprozess und VM Installation vmtools button grau

>>:  SQL-Skriptfunktion zum Schreiben einer PostgreSQL-Datenbank zur Implementierung der Analyse

Artikel empfehlen

Beispiele für Vorschaufunktionen für verschiedene Dateitypen in vue3

Inhaltsverzeichnis Vorwort 1. Vorschau der Office...

HTML-Hyperlinks im Detail erklärt

Hyperlink Hyperlinks sind die am häufigsten verwen...

TypeScript-Dekorator-Definition

Inhaltsverzeichnis 1. Konzept 1.1 Definition 1.2 ...

Detaillierte Erläuterung der Windows-Zeitserver-Konfigurationsmethode

Kürzlich habe ich festgestellt, dass die Serverze...

Ausführliche Erläuterung der MySQL-Isolationsebene und des Sperrmechanismus

Inhaltsverzeichnis Kurzbeschreibung: 1. Vier Merk...

Lösen Sie das Problem des MySQL Threads_running-Surge und der langsamen Abfrage

Inhaltsverzeichnis Hintergrund Problembeschreibun...

Reiner CSS-Code zum Erzielen von Fluss und dynamischen Linieneffekten

Ideen: Eine äußere Box legt den Hintergrund fest;...

CSS löst das Problem der Front-End-Bildverformung perfekt

Ich habe in der Toutiao IT School einen Artikel g...

Lösung für das Docker-Pull-Timeout

In letzter Zeit ist das Abrufen von Docker-Images...

So optimieren Sie die MySQL-Abfragegeschwindigkeit

In den vorherigen Kapiteln haben wir die Auswahl ...

Implementierungscode zum Hinzufügen von Links zu FLASH über HTML (Div-Ebene)

Heute möchte ein Kunde eine Anzeige schalten und d...

CSS transparenter Rahmen Hintergrund-Clip-Magie

In diesem Artikel wird hauptsächlich die wunderba...

Zusammenfassung der neuen Verwendung von vi (vim) unter Linux

Ich benutze den vi-Editor seit mehreren Jahren, h...