Část 4:Nasazení projektu VueJS na stránky GitHubu pro živou verzi

Obsah

  • Klonujte úložiště GitHub, pokud jste skočili přímo na Part 4 této série
  • Co je zatím hotovo?
  • Rychlý přehled
  • Krok 1:Vytvořte novou větev git a zaplaťte v ní
  • Krok 2:Odeberte dist složku z gitignore soubor
  • Krok 3:Vytvořte vue.config.js soubor
  • Krok 4:Změňte soubor na /src/router/index.js/
  • Krok 5:Vytvořte produkční verzi projektu
  • Krok 6:Připravte všechny změny
  • Krok 7:Potvrďte všechny změny
  • Krok 8:Stiskněte dist složky do gh-pages vzdálená pobočka na GitHubu
  • Krok 9:Užijte si živou verzi webu
  • DŮLEŽITÉ UPOZORNĚNÍ

Klonujte úložiště GitHub, pokud jste přešli rovnou na část 4 této série

Pokud jste neprošli všemi částmi výukového programu, ale přešli jste rovnou k této části, můžete zvážit naklonování veřejného úložiště GitHub s projektem hotovým a připraveným k nasazení na stránky GitHubu. Je zde odkaz na veřejné úložiště GitHub.

Co je zatím hotovo?

Proto jsem zatím udělal:

  • vytvořil nový prázdný projekt na GitHubu.

  • naklonoval vzdálené úložiště GitHub do mého místního počítače.

  • vytvořena nová šablona Vue 3 projektu na mém místním počítači.

  • odeslána počáteční šablona Vue 3 kód z mého místního počítače do vzdáleného úložiště na GitHubu.

  • vytvořili demo webovou stránku se seznamem produktů.

  • přesunul všechny změny kódu do vzdáleného úložiště na GitHubu.

Rychlý přehled

Nyní nasadím Vue 3 ukázkový web list-with-products na stránky GitHub, aby byly dostupné online.

Chystám se vytvořit nový git úložiště na mém místním počítači, protože:

  1. Potřebuji vytvořit dist složku a odeslat ji (potvrdit) do vzdáleného gh-pages pobočka na GitHubu.
  2. Ve výchozím nastavení dist složka je zahrnuta do .gitignore aby nedošlo ke znečištění master větev.
  3. Chci svůj master větev, aby byla čistá a jasná.

Takže, pojďme začít s akcí!

Krok 1

Otevřete projekt pomocí editoru kódu.
V konzole editoru kódu zadejte git branch abyste se ujistili, že jste v *master nebo *main úložiště.
Vytvořte nový git větev s názvem dist a pokladna k tomu:

git checkout -b dist

Krok 2

Přejděte na gitignore soubor a odstraňte dist složku ze seznamu:

Krok 3

Vytvořte soubor vue.config.js v root úroveň vašeho projektu a vložte následující kód:

module.exports = {
    publicPath: '/list-with-products/'
}

Mělo by to vypadat takto:

Krok 4

Změňte soubor na /src/router/index.js/ , tj. nahraďte line 19 s následujícím kódem:

history: createWebHistory('/list-with-products/'),

A je zde soubor ke změně na line 19 :

Krok 5

Sestavení produkční verze projektu:

npm run build

Jak jste si mohli všimnout dist složka byla vytvořena:

Krok 6

Uspořádejte všechny změny:

Krok 7

Potvrdit všechny změny:

Krok 8

Stiskněte dist složky do gh-pages vzdálená pobočka na GitHubu:

git subtree push --prefix dist origin gh-pages

Krok 9

Gratuluji! Váš projekt je nyní aktivní! Můžete jej zkontrolovat tak, že přejdete na Settings -> Pages :

DŮLEŽITÉ UPOZORNĚNÍ

Buďte prosím trpěliví a po vložení kódu na gh-pages počkejte několik minut, pokud váš web nebude dostupný online vzdálená pobočka na GitHubu. Z vlastní zkušenosti mohu říci, že někdy může trvat až 5 minut, než bude web dostupný online.