Рубрики
Без рубрики

Развертывание приложения Vue из GitHub для NetLify

В этой статье мы будем проходить процесс развертывания VUE-приложения от GitHub для NetLify. Если у вас есть структура проекта, в которой приложение VUE не вложено в подобное каталог, как …

Автор оригинала: Ezekiel Ekunola.

В этой статье мы будем проходить процесс развертывания VUE-приложения от GitHub для NetLify.

Если у вас есть структура проекта, когда приложение Vue является Не вложено в подкаталоги, как в примере, показанном ниже

Структура проекта

Вы можете использовать следующие шаги для развертывания:

  • Нажмите свой код в github
  • Подключите учетную запись GitHub к вашей учетной записи NetLify
  • Выберите проект, который вы хотите развернуть
  • Добавить команды
    • Создать команду (NPM запустить сборку) : Это команда, которая будет запускаться для каждой сборки/развертывания в NetLify. Команда Vue для строительства и пакета наших файлов – NPM запустить сборку Отказ
    • Опубликовать каталог (dist) : Это папка, которая содержит файлы, которые были созданы из команды сборки. После запуска команды сборки A Dist Папка генерируется, и она содержит наш министерзированный и компилированный готовый код производства.
  • Развертывание проекта

Смотрите Пример на изображении ниже

Развертывание приложения

В случае, когда ваше VUE-приложение доступно в вложенном каталоге, как пример, показанный ниже

Вложенный каталог

Обратите внимание, что проект Vue в приведенном выше примере вложен в каталог клиента.

Добавить netlify.toml Файл в корню вашего проекта и добавьте конфигурацию ниже в файл.

[build]
  command = "npm run build"
  publish="dist"
  base = "client"
  # The base directory should be the path to the nested Vue project

После добавления нажмите изменения в GitHub. NetLify должен автоматически развернуть изменения, если нет, разверните изменения вручную.

Примечание: netlify.toml Это файл конфигурации, в котором вы можете указать, как NetLify должен создать/запустить ваше приложение. Много может быть достигнуто с netlify.toml файл. Узнайте больше о netlify.toml Файл здесь.

Маршрутизация

Если вы использовали использование маршрутизации в вашем проекте, и вы хотите загрузить определенный маршрут прямо с вашего URL, вы бы столкнулись с проблемой, где NetLify будет бросать ошибку («страница не найдена»), как показано в примере ниже

Сломанный URL

Чтобы решить/исправить проблему, вы можете добавить следующий код ниже на ваш netlify.toml файл.

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

После добавления нажмите изменения в GitHub и повторно разверните проект. После развертывания ваше приложение больше не должно бросать ошибки. Смотрите пример ниже.

Фиксированный URL

Переменные среды

Если вы использовали переменные среды в вашем проекте, вы также можете добавить их в NetLify, следуя шагам, показанным на изображении ниже

Переменные среды

Обратите внимание, что если вы создали приложение Vue, используя Vue-Cli , вам нужно добавить Vue_app префикс ко всем вашим переменным окружающей среды.

Заключение

В этой статье мы смогли взглянуть на то, как развернуть приложение Vue от GitHub в NetLify, как исправить проблемы маршрутизации, которые могут придумать после развертывания и а также как добавить переменные среды в NetLify.

Если у вас есть какие-либо вопросы или отзывы об этой статье, не стесняйтесь оставить комментарий.

Спасибо за прочтение.

Эта статья была первоначально опубликована на моем Блог Отказ

Читайте ещё по теме: