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 zgitignore
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 dogh-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:
- Potřebuji vytvořit
dist
složku a odeslat ji (potvrdit) do vzdálenéhogh-pages
pobočka na GitHubu. - Ve výchozím nastavení
dist
složka je zahrnuta do.gitignore
aby nedošlo ke znečištěnímaster
větev. - 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.