本番デプロイ ​

開発と本番の違い ​

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

• よくあるエラーや落とし穴に対する警告
• props やイベントに対するバリデーション
• リアクティビティーのデバックのためのフック
• 開発者ツールとの連携

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

ビルドツールなし ​

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. 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 の公式連携を提供しています。