So fügen Sie Vite-Unterstützung zu alten Vue-Projekten hinzu

1. Einleitung

Ich habe vor zwei Jahren ein Projekt des Unternehmens übernommen. Jetzt dauert es jedes Mal fast 1 Minute, das Projekt zu starten, und HMR braucht mehrere Sekunden. Aber nach der Veröffentlichung von Vite2 habe ich das Licht gesehen, aber ich habe es nie aktualisiert. Gestern konnte ich es endlich nicht mehr lassen und es war innerhalb von Sekunden nach dem Upgrade abgeschlossen.

vite ist ein Webentwicklungstool, das vom Vue-Autor Yuxi You entwickelt wurde. Es verfügt über die folgenden Funktionen:

Schneller Kaltstart

Sofortiges Hot-Update des Moduls

Echte On-Demand-Kompilierung

2. Starten Sie das Upgrade

Hinweis: Ich habe gerade die Entwicklungsumgebung aktualisiert und zum Verpacken wird immer noch Webpack verwendet (ich habe auch versucht, Vite zum Verpacken zu verwenden, aber nach dem Verpacken habe ich festgestellt, dass es ein Problem mit dem Schriftsymbol von iview gab. Eine vorläufige Überprüfung ergab, dass es sich um ein Problem mit statischen Ressourcen handelte. Die von Vite gepackten statischen Ressourcen werden standardmäßig unter „Assets“ abgelegt. Wenn jemand eine Lösung hat, lassen Sie es mich bitte wissen.)

2.1 Installieren Sie das Vuecli-Plugin vite

vue add vit # Vite-Plugin hinzufügen

Nachdem das Plugin installiert wurde, wird es dem Skript in package.json hinzugefügt:

{
    "Skript": {
        "vite": "Knoten ./bin/vite"
    }
}

Für Studierende, die pnpm verwenden: Wenn im Stammverzeichnis des Projekts keine .npmrc-Datei vorhanden ist, fügen Sie diese bitte selbst hinzu und fügen Sie der Datei „shamefully-hoist=true“ hinzu. Andernfalls kann die Installation des Vite-Plugins fehlschlagen.

2.2. Ausführen des Projekts und Beheben von Fehlern

2.2.1、TypeError: Kann Eigenschaft ‚alias‘ von undefined nicht lesen

Dieser Fehler tritt auf, weil configureWebpack in vue.config.js nur die Objektkonfigurationsmethode verwenden kann (vue cli unterstützt sowohl Objekte als auch Funktionen).

2.2.2 Uneingeschränkter Dateisystemzugriff auf "/src/components/editPwd

Der Grund für dieses Problem ist, dass die Erweiterungen in der Standardkonfiguration von vite nicht .vue enthalten; Lösung:

1. Erweiterungen in vue.config hinzufügen

// vue.config.js
modul.exporte = {
    Webpack konfigurieren:{
        lösen:{
            Erweiterungen: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
        }
    }
}

2. Fügen Sie beim Importieren allen Vue-Komponenten das Suffix .vue hinzu.

2.2.3. Der Startport ist nicht 8080

Der Standard-Startport von vite ist 3000, daher müssen Sie in vue.config.js den Port:8080 zum devServer hinzufügen.

// vue.config.js
modul.exporte = {
    devServer:{
        Port: 8080
    }
}

2.2.4. Proxy-Fehler während der Entwicklung

Der Grund für den Proxy-Fehler: Die Rewrite-Konfiguration in Vuecli lautet „pathRewrite“, während sie in Vite „rewrite“ lautet.

Lösung:

modul.exporte = {
    devServer: {
        Port: 8080,
        Proxy: {
            "/api/cost/": {
                Ziel: "http://localhost:9331",
                changeOrigin: wahr,
                PfadNeu schreiben: {
                    "^/api/cost/": "/",
                },
                umschreiben: path => path.replace(/^\/api\/cost\//, "/"), // An vite anpassen
            },
            "/api/import/": {
                Ziel: "http://localhost:9332",
                changeOrigin: wahr,
                PfadNeu schreiben: {
                    "^/api/import/": "/",
                },
                umschreiben: path => path.replace(/^\/api\/import\//, "/"), // An vite anpassen
            },
            "/api/": {
                Ziel: "http://localhost:9333",
                ws: wahr,
                changeOrigin: wahr,
                PfadNeu schreiben: {
                    "^/api/": "/",
                },
                umschreiben: path => path.replace(/^\/api\//, "/"), // An vite anpassen
            },
        },
    },
}

3. Upgrade abgeschlossen

Der gesamte Upgrade-Prozess ist nun abgeschlossen. Insgesamt verlief er relativ reibungslos, ohne allzu viele Fallstricke, und die meisten davon waren relativ einfach zu lösende Probleme.

Dies ist das Ende dieses Artikels zum Hinzufügen von Vite-Unterstützung zu alten Vue-Projekten. Weitere relevante Inhalte zum Hinzufügen von Vite zu alten Vue-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!