本文へジャンプ

本番デプロイ

開発と本番の違い

開発時において、Vue は開発体験を向上させるための様々な機能を提供します:

しかし、これらの機能は本番では役に立ちません。警告の検査の中には、わずかなパフォーマンスのオーバーヘッドを発生させるものもあります。本番へのデプロイ時には、ペイロードサイズを小さくしてパフォーマンスを向上させるために、使用されていない開発専用のコードブランチをすべて削除する必要があります。

ビルドツールなし

CDN やセルフホストのスクリプトからロードして、ビルドツールなしで Vue を使用している場合、本番にデプロイする時は必ず本番向けビルド (末尾が .prod.js である dist ファイル) を使用して下さい。本番向けビルドは、開発専用のコードブランチがすべて削除され事前に最小化されています。

  • グローバルビルドを使用している場合 ( Vue グローバル経由でアクセスしている場合): vue.global.prod.js を使用して下さい。
  • ESM ビルドを使用している場合(ネイティブの ESM インポートでアクセスしている場合): vue.esm-browser.prod.js を使用して下さい。

詳しくは、dist ファイルガイドをご覧ください。

ビルドツールあり

create-vue (Vite ベース) または Vue CLI (webpack ベース) で生成されたプロジェクトは、本番ビルド用にあらかじめ設定がされています。

カスタムセットアップを使用している場合は、以下を確認してください:

  1. vuevue.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) => {
  // トラッキングサービスへエラーを報告する
}

SentryBugsnag などのサービスも、Vue の公式連携を提供しています。

本番デプロイが読み込まれました