Развёртывание ​

Разработка в сравнении с продакшен-сборкой ​

Во время разработки Vue предоставляет ряд функций для улучшения процесса разработки:

• Предупреждение о распространённых ошибках и подводных камнях
• Валидация параметров и событий
• Хуки отладки реактивности
• Интеграция Devtools

Однако эти функции становятся бесполезными в работе. Некоторые проверки предупреждений также могут привести к небольшому снижению производительности. При развёртывании в рабочей среде нам следует удалить все неиспользуемые ветки кода, предназначенные только для разработки, чтобы уменьшить размер полезной нагрузки и повысить производительность.

Без инструментов сборки ​

Если вы используете Vue без инструмента сборки, загружая его из CDN или локального сценария, обязательно используйте продакшен-сборку (файлы dist, оканчивающиеся на .prod.js) при развёртывании в рабочей среде. продакшен-сборки предварительно минимизированы, при этом все ветки кода, предназначенные только для разработки, удалены.

• Если вы используете глобальную сборку (доступ через глобальную версию Vue): используйте vue.global.prod.js.
• При использовании сборки ESM (доступ через собственный импорт ESM): используйте vue.esm-browser.prod.js.

Для получения более подробной информации обратитесь к руководству по файлам dist.

С инструментами сборки ​

Проекты, созданные с помощью create-vue (на основе Vite) или Vue CLI (на основе webpack), предварительно настроены для продакшен-сборок.

При использовании пользовательской настройки убедитесь, что:

1. vue преобразуется в vue.runtime.esm-bundler.js.
2. флаги функций во время компиляции настроены правильно.
3. process.env.NODE_ENV заменяется на "production" во время сборки.

Дополнительные ссылки:

• Руководство Vite по продакшен-сборке
• Руководство Vite по развёртыванию
• Руководство Vue CLI по развёртыванию

Отслеживание ошибок среды выполнения ​

Обработчик ошибок уровня приложения можно использовать для сообщения об ошибках службам отслеживания:

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // сообщить об ошибке в службы отслеживания
}

Такие службы, как Sentry и Bugsnag, также предоставляют официальную интеграцию для Vue.