Причина, по которой Vue сейчас так популярен, частично связана с официальным инструментом генерации скаффолдов Vue-cli, который значительно упрощает стоимость создания среды для начинающих, однако в реальном бизнесе нам часто приходится реализовывать другие функции для преобразования webpack. В этой статье сначала будет изучен шаблон, сгенерированный vue-cli, в соответствии с некоторыми реальными потребностями бизнеса, а затем будут внесены соответствующие изменения.
Vue-cli создает каталог файлов шаблонов
├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static
Основное внимание в этой статье уделяется
build - код для компиляции задачи
config - файл конфигурации для вебпака
package.json — основная информация о проекте
Конкретное значение конфигурации каждой строки веб-пакета здесь подробно описываться не будет, см.Анализ файла конфигурации Webpack для скаффолдинга vue2.0
Общее требование 1: конфигурация и выпуск для нескольких сред
Шаблон, сгенерированный Vue-cli, настраивает только сценарии npm run dev и npm run build для запуска службы среды разработки и выполнения упаковки соответственно. Обычно нормальный процесс разработки компании включает как минимум среду разработки, тестового моделирования и производственную среду, а адрес запроса сервера или некоторые параметры конфигурации, на которые отвечает каждая среда, будут разными, и при публикации их необходимо публиковать на нескольких серверах, поэтому для этого нужно выполнить автоматизированный скрипт. Создавайте и публикуйте.
Понимание процесса развертывания кода
Сначала надо разобраться с этой проблемой, перепечатать статью, автор: Чжэн Хайбо,Связь, источник: Чжиху
На самом деле это не имеет ничего общего с vue, это общий вопрос: где создается код. Если сервер в заголовке относится к работающему серверу, то ни один из них не является хорошим выбором. Многие новички, в том числе и я, до начала работы думали, что код развертывания такой.Но на самом деле в крупных интернет-компаниях немного сложнее. Следующие введения являются общепринятой практикой и упрощают некоторые процессы только для удобства новичков. Отправьте код на сервер git или svn. Обратите внимание, что это исходный файл, а не файл сборки.
2. Сервер сборки загрузит версию кода, которая будет выпущена, с сервера git и завершит здесь установку зависимостей, таких как тема vue. И файлы сборки для развертывания, эти файлы также обычно сжимаются в сжатый пакет для управления.
3. Готовый пакет релиза будет загружен на станцию передачи: кластер серверов управления файлами.
4. Реально работающий сервер, как правило, не один, а кластер.Эти n серверов будут тянуть один и тот же сжатый пакет соответствующей версии с файлового сервера, распаковывать его и запускать, наконец.
На самом деле в нем есть очевидные последовательные процессы. Было бы очень хлопотно, если бы все они выполнялись вручную. Поэтому, как правило, у крупных компаний будет платформа автоматического развертывания для координации общего выполнения этих задач. Как разработчик, вы нужно только нажать «Развертывание в один клик», чтобы завершить вышеуказанное содержимое
Например, в сотрудничестве с веб-перехватчиком, предоставленным gitlab и github для автоматического уведомления платформы автоматического развертывания, была отправлена стабильная версия кода (Push Event). Тогда нам даже не нужно нажимать кнопку. Это типичный случай разделения построения и развертывания, что дает много преимуществ, таких как обеспечение построения единого кода и предотвращение возможности несогласованности, вызванной созданием нескольких сред. привести к несоответствиям в работе сервера.Стабильный можно быстро откатить или восстановить, и ту же версию кода не нужно пересобирать. . .
Сказав так много, упаковка и сборка - непростая задача, поэтому для настройки необходимы автоматизированные инструменты.
Вручную измените конфигурацию веб-пакета vue-lic в сочетании сfjpublishВыпуск пакета для нескольких сред
Основная операция заключается в настройке переменных среды, которые необходимо настроить для./configВ соответствующем файле в каталоге
Конкретный процесс настройки описан в другой моей статье.
Dockerконтейнерная технология
Процесс построения вышеперечисленных крупных компаний очень сложен.На основе Docker можно выполнить настройку контейнера.Я с ним не знаком, и знакомые друзья могут прислать ссылки для обучения и изучения.Вот статья по теме софта :Построение интерфейсной непрерывной интегрированной среды разработки на основе Docker
Следующий раздел будет следоватьСледуйте за Vue-cli, чтобы «изучить» и «изменить» оптимизацию упаковки Webpack.