Как развернуть приложение VueJs на сервере tomcat.
Что вы можете забрать? В этом руководстве вы создадите приложение Vue с нуля и развернете приложение на сервере apache tomcat.
Что такое Apache Tomcat® Программное обеспечение Apache tomcat - это реализация с открытым исходным кодом Java Servlet, JavaServer Pages, Java Expression Language и Java WebSocket. Спецификации Java Servlet, JavaServer Pages, Java Expression Language и Java WebSocket разрабатываются в рамках Процесса сообщества Java. Программное обеспечение Apache Tomcat поддерживает множество крупномасштабных критически важных веб-приложений в самых разных отраслях и организациях.
Что такое VueJS? Это прогрессивная платформа JavaScript.
Постепенно адаптируемая экосистема, которая масштабируется между библиотекой и полнофункциональным фреймворком.
Vue.js - это платформа JavaScript Model – View – ViewModel с открытым исходным кодом для создания пользовательских интерфейсов и одностраничных приложений.
Приступим.
Перво-наперво, давайте создадим приложение VueJs с помощью Vue CLI. Выполните команду ниже, чтобы создать приложение Vue из командной строки. Это может занять некоторое время.
Убедитесь, что у вас установлена последняя версия Vue CLI.
npm install -g @vue/cli
После установки CLI выполните следующую команду, чтобы создать приложение Vue hello-world.
vue create hello-worldВам будут заданы некоторые вопросы в процессе создания приложения. Убедитесь, что вы выбрали Vue-preset, когда их спросят.
После создания приложения Vue следующим шагом будет запуск приложения, выполнение приведенной ниже команды для запуска приложения.
$ cd hello-world $ npm run serve
После запуска приложения откройте браузер и нажмите URL-адрес ниже. Ваша заявка будет оформлена
http://localhost:8080/
Поздравляю !! Вы успешно создали приложение Vue
Теперь давайте создадим файл vue.config.js в корне проекта, vue.config.js должен быть создан на корневом уровне проекта.
Определите общедоступный путь в vue.config.js, откройте vue.config.js и добавьте приведенный ниже блок кода.
Добавьте приведенную ниже конфигурацию в vue.config.js. В этом руководстве давайте настроим контекст приложения как HelloWorld. Вы можете создать другой контекст приложения в соответствии с вашими требованиями.
Замените текст HelloWorld тем, который вам нравится в вашем приложении.
publicPath: process.env.NODE_ENV === 'production'
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/HelloWorld/': '/'
}
Теперь давайте создадим производственную сборку, производственную сборку можно запустить с помощью команды ниже.
npm run-script build
Когда вы запустите производственную сборку, вы увидите сообщение ниже в выводе консоли, это означает, что сборка prod запущена.
После успешного завершения сборки вы можете найти папку dist в корне проекта. Это не что иное, как артефакты сборки, состоящие из развертываемых файлов.
Загрузите сервер Tomcat по приведенной ниже ссылке, если он у вас уже загружен, мы можем его использовать.
После загрузки разархивируйте пакет. Создайте TOMCAT_HOME (это ваша корневая папка tomcat). Если вы посмотрите на подкаталоги, там будет папка webapps. Создайте папку для своего приложения, давайте создадим папку под названием H elloWorld. Помните, что мы настроили то же самое в vue.config.js выше
TOMCAT_HOME / webapps / HelloWorld
Скопируйте все файлы из папки dist в папку HelloWorld, которую мы создали в процессе производственной сборки на предыдущем этапе.
Запустить Tomcat Server
TOMCAT_HOME / webapps / bin
Пользователи Unix / Mac могут запустить сервер с помощью startup.sh.
Откройте браузер и вставьте приведенный ниже URL-адрес.
http://localhost:8080/HelloWorld
Если все пойдет хорошо, приложение Vue появится в браузере.
Вы можете найти ту же инструкцию на YouTube по ссылке ниже.
