Vue.js

Зовнішній вигляд

На цій сторінці

Розгортання продакшну ​

Розробка проти продакшну ​

Під час розробки Vue надає ряд функцій для покращення зручності розробки:

Однак ці функції стають марними у продакшні. Деякі попередження перевірок, також можуть додавати невеликі витрати до продуктивності. Під час розгортання продакшну, ми повинні відмовитися від усіх невикористаних гілок коду, призначених лише для розробки, для зменшення розміру корисного навантаження та кращої продуктивності.

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

Якщо ви використовуєте Vue без інструмента збірки, завантажуючи його з CDN, або самостійно розміщеного сценарію, переконайтеся, що використовуєте продакшн збірку (файли dist, які закінчуються на .prod.js) під час розгортання продакшну. Продакшн збірки попередньо зменшені після видалення усіх гілок коду, які використовуються лише для розробки.

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

Зверніться до гіда, щоб дізнатися більше.

З інструментами збірки ​

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

Якщо ви використовуєте користувацьке налаштування, переконайтеся, що:

  1. vue перетворюється на vue.runtime.esm-bundler.js.
  2. особливі прапорці під час компіляції правильно налаштовані.
  3. process.env.NODE_ENV замінюється на "production" під час збірки.

Додаткові посилання:

Відстеження помилок під час виконання ​

Глобальний обробник помилок можна використовувати для повідомлення служб відстеження про помилки:

js
import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // повідомлення служб відстеження про помилки
}

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

Редагувати цю сторінку на GitHub