Vueプロジェクトをパッケージ化してリリースする手順

Vue プロジェクトの開発が完了したら、プロジェクトをパッケージ化してオンラインで起動する必要があります。同時に、本番環境プロジェクトをローカルでプレビューしたいと考えています。

(vue-cli scaffolding によって生成されたプロジェクトを例に挙げます)

1. 開発環境から本番環境への移行

プロジェクトの開発が完了したら、まずバックエンドに通知してオンライン パスを取得し、以前の開発パスをオンライン パスに切り替える必要があります。

プロジェクトの config フォルダーにある dev.env.js ファイルを開き、バックエンドによって指定されたオンライン パスを入力します。

「厳密な使用」
モジュール.エクスポート = {
  NODE_ENV: '"production"'、
  BASE_API: '"http://sdk.*********.cn:3838/"' //オンライン パス}

2. 統一されたリクエストパスを設定する

プロジェクトがパッケージ化された後、すべての js、css、および画像は独自の統合フォルダーに格納されるため、以前のパスを変更する必要があります。 1 回の変更に時間がかかりすぎるので、どうすればよいでしょうか。

ビルド フォルダー内の utils.js を開き、必要に応じて追加します。通常は 2 つの ../ が追加されます。

  if (オプション.抽出) {
      戻り値: ExtractTextPlugin.extract({
        使用: ローダー、
        フォールバック: 'vue-style-loader'、
        publicPath : '../../' // 新しく追加されたコンテンツ、パス構成})
    } それ以外 {
      ['vue-style-loader'].concat(loaders) を返します。
    }
  }

場合によっては、HTML のメインパスが正しく導入されないという問題が発生します。このとき、config フォルダ内の index.js ファイルを設定し、assetsPublicPath を変更する必要があります。ここでの assetPublicPath は、dev 開発環境の assetPublicPath ではなく、build 本番環境の assetPublicPath パスであることに注意してください。

3. パッケージ化コマンドを実行する

npm 実行ビルド
//通常、変更されていない場合はビルドされます

実行後の結果は次のとおりです。

実行後にdistフォルダを生成する

これで、Vue プロジェクトをパッケージ化してオンラインでリリースする手順に関するこの記事は終了です。Vue プロジェクトをパッケージ化してオンラインでリリースする方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。