Опитвали ли сте някога да внедрите своя проект с помощта на Vue Webpack CLI в Github Pages? CLI е страхотна система, която ни позволява да се възползваме от много функции, като ES6 синтаксис и Vue Template

Както веднъж каза разработчикът на софтуер Теодор Рузвелт,

„Нищо на света не си струва да имаш или да правиш, освен ако не означава усилие, болка, трудност.“

Въпреки че много хора може да си помислят, че разработчиците на Vue се справят лесно, както през повечето време правим ние, внедряването в gh-страници за първи път може да бъде кошмар.

**********************************************************

Ето две опции

Опция 1: Как да внедрите в Github-Pages с главен клон и папка с документи:

  1. Във вашия главен клон изпълнете командата на терминала: `npm run build`.
  2. Променете името на вашата папка `dist` на `docs`
  3. В новосъздадената папка „docs“ отидете на index.html и премахнете „/“ в началото на всеки скрипт и атрибута „src“ на тага за връзка.
  4. Отидете в настройките на вашето хранилище.
  5. Превъртете до настройките на Github Pages.
  6. Променете своя `Source` в настройките на Github Pages от `gh-pages branch` на `master branch/docs folder`.
  7. Сега можете да изпратите своя главен клон към github и той ще бъде хостван от Github Pages.
  8. Ако искате да направите промяна в главния си клон и той да бъде открит от Github Pages, ще трябва да изтриете папката си с документи и да следвате инструкциите от стъпка 1.

Вариант 2. Как да внедрите в Github-Pages с клон на gh-pages

  1. Уверете се, че вашият клон на gh-pages е обединен с всички промени, които искате да внедрите на живо, и че приложението ви е готово за производство.
  2. Докато сте във вашия клон на gh-pages, изпълнете командата на терминала: `npm run build`.

3. Тази команда ще създаде папка `dist` във вашата основна директория, която ще съдържа вашия готов за производство код. Ще ви трябва тази папка, за да продължите.

4. Не забравяйте да премахнете `/dist/` от вашия `.gitignore` файл. Искате да можете да изпратите тази папка в github.

5. Отидете във вашата папка `/dist`. Ще искате да копирате всичките си връзки и тагове на скрипт. Когато вашата папка dist бъде създадена, тя ще минимизира тези файлове, но [SHIFT]+[ALT]+[F] във VS Code трябва да ви позволи да преформатирате кода си, за да можете лесно да преглеждате своя скрипт и етикети за връзки.

6. Копирайте всички тези тагове и ги поставете във файла `index.html` в корена на вашия проект.

7. Ако имате тагове за скрипт или връзка, които вече са били в `index.html` във вашата основна директория, като например bootstrap, materialize и т.н., **ОСТАВЕТЕ ГИ САМИ**.

8. След като поставите етикетите за връзка и скрипт от вашата папка dist, добавете `dist/` в началото на `src` във всички тагове, които сте поставили.

9. Сега Github ще знае да обслужва файловете във вашата dist папка, където се намира производственият код.

10. Ако искате да направите промяна във вашия клон на gh-pages, ще трябва да изтриете вашата папка `dist`, да изтриете таговете към папката `dist` във вашия основен index.html и да следвате инструкциите, като започнете от стъпка 2.