نصب در محیط Production ​

Development در مقابل Production ​

در ‌حین توسعه، Vue چندین ویژگی برای بهبود تجربه توسعه ارائه می‌دهد:

• هشدار برای خطاها و مشکلات رایج
• اعتبارسنجی props / events
• هوک‌های دیباگ Reactivity
• یکپارچه سازی Devtools

با این حال، وجود این ویژگی‌ها در production بی‌فایده است. هنگام استقرار در production، برخی از بررسی‌ها برای دادن اخطار نیز می توانند مقدار کمی سربار عملکردی را به همراه داشته باشند. برای کاهش اندازه خروجی و بهبود عملکرد باید تمام کد‌های اضافی را حذف کرد.

بدون ابزارهای ساخت build ​

اگر از Vue بدون ابزار build با بارگیری از CDN یا اسکریپت میزبانی شده خود استفاده می‌کنید، هنگام استقرار در production مطمئن شوید که از production build (فایل‌های dist که با ‎.prod.js تمام می‌شوند) استفاده می‌کنید. production buildها قبلاً کوچک شده‌اند و تمام شاخه‌های کد برای محیط توسعه از قبل حذف شده‌اند.

• اگر از build جهانی استفاده می‌کنید (دسترسی از طریق جهانی Vue): از vue.global.prod.js استفاده کنید.
• اگر از ESM build استفاده می‌کنید (دسترسی از طریق import محلی ESM): از vue.esm-browser.prod.js استفاده کنید.

برای جزئیات بیشتر به راهنمای فایل dist مراجعه کنید.

با استفاده از ابزارهای build ​

پروژه‌های ایجاد شده با create-vue (مبتنی بر Vite) یا Vue CLI (مبتنی بر webpack) از پیش برای production build پیکربندی شده‌اند.

اگر از یک راه‌اندازی سفارشی استفاده می‌کنید، مطمئن شوید که:

1. vue به vue.runtime.esm-bundler.js ختم شده است.
2. فلگ‌های زمان کامپایل به درستی پیکربندی شده‌اند.
3. process.env.NODE_ENV در زمان build با "production" جایگزین شده است.

مراجع اضافی:

• راهنمای ساخت production در Vite
• راهنمای استقرار Vite
• راهنمای استقرار Vue CLI

ردیابی خطاهای رانتایم ​

می‌توان از app-level error handler برای گزارش خطاها به سرویس‌های ردیابی و جمع آوری خطا استفاده کرد:

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // گزارش خطا به سرویس‌های ردیابی
}

سرویس‌هایی مانند Sentry و Bugsnag یکپارچه سازی رسمی برای Vue ارائه می‌دهند.