В этом руководстве вы узнаете, как развернуть свое приложение на бесплатном хостинге Vue.js в Firebase.
1. Создайте производственную сборку
Прежде всего, у вас должна быть производственная/общедоступная сборка вашего приложения Vue.js. Обычно он создается с помощью следующей команды:
npm run build
Он создаст общедоступную сборку в новой папке, обычно public/ или dist/. Убедитесь, что он существует, прежде чем переходить к следующему шагу.
2. Установите Firebase CLI
Чтобы разместить свой сайт с помощью Firebase Hosting, вам понадобится Firebase CLI (инструмент командной строки). Выполните следующую команду npm, чтобы установить или обновить последнюю версию CLI.
npm install -g firebase-tools
3. Создайте новый проект Firebase
Войдите в панель администратора Firebase и создайте новый проект.
4. Войдите в Firebase с помощью CLI
Теперь вам нужно войти в Firebase, используя ранее установленный инструмент командной строки. Запустите команду ниже и следуйте инструкциям:
firebase login
5. Инициализируйте/синхронизируйте свое приложение Vue.js
Запустите команду ниже и выберите «хостинг» в качестве метода синхронизации и выберите свой проект Firebase из списка.
firebase init
Эта команда создаст два файла конфигурации: .firebaserc и firebase.json.
6. Разверните приложение Vue.js в Firebase
Последний шаг — развертывание приложения в Firebase. Выполните приведенную ниже команду, чтобы развернуть приложение.
firebase deploy
Приведенная выше команда перенесет вашу папку public/ или dist/ на хостинг Firebase и создаст новую сборку на Firebase.
Если вы найдете этот пост полезным, дайте мне знать в комментариях ниже и подпишитесь на мою рассылку.
Ура,
Ренат Галямов
Хотите поделиться этим с друзьями?
👉 renatello.com/vuejs-firebase-deploy
PS: Обязательно ознакомьтесь с другими учебниками по JavaScript, например. как защитить паролем свой сайт в Vue.js, как установить код отслеживания Google Analytics в Vue.js.
Первоначально опубликовано на https://renatello.com (Как развернуть приложение Vue.js на хостинге Firebase) 21 августа 2019 г.