Публикация на production ​

Разработка vs. production ​

В процессе разработки Vue предоставляет ряд возможностей, улучшающих опыт разработки:

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

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

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

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

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

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

С помощью инструментов сборки ​

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

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

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

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

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

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

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

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // сообщаем об ошибке в сервис трекинга
}

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