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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue.js プロジェクトをパッケージ化して起動する方法についてのグラフィック チュートリアル
  • Vue の自動デプロイメントとパッケージングに関する簡単な説明
  • vue-cli をパッケージ化して起動する方法の例
  • vue.jsプロジェクトのパッケージ化と起動の全プロセス

<<:  私が良いと思うクールなデザインサイトをいくつかまとめてみました。

>>:  MySQL 8.0.24 のインストールと設定方法のグラフィックチュートリアル

推薦する

Docker ベースの Redis 1 マスター、2 スレーブ、3 センチネルの実装

現在、Redis とコンテナについて学習中なので、Docker を使用して Redis マスタースレ...

CSS 要約ノート: 変換、遷移、アニメーションの例

1.移行遷移プロパティの使用法: transition :transition-property t...

Navicatを使ってMySQLを操作する方法

目次序文: 1. Navicatの紹介2. シンプルなチュートリアルの共有接続管理ライブラリテーブル...

配列をフラット化する 5 つの JavaScript の方法

目次1. 配列の平坦化の概念2. 実装1. 減らす2. toString と split 3. 結合...

LinuxにNginxを素早くインストールする方法

目次nginxとは1. 必要な依存関係をダウンロードする2. nginxの圧縮パッケージをダウンロー...

Mysql5.7.18 のインストールとマスタースレーブレプリケーションの詳細なグラフィック説明

CentOS6.7にmysql5.7.18をインストールする 1. /usr/localディレクトリ...

SQLはLeetCodeを実装します(180.連続した数字)

[LeetCode] 180. 連続した数字少なくとも 3 回連続して出現するすべての数字を検索す...

トランジションコンポーネントのアニメーション効果を使用した Vue サンプルコード

トランジションドキュメントアドレスは、フェードインとフェードアウト効果を実現するための背景ポップアッ...

VMware Workstation に Windows Server 2019 をインストールする (グラフィック チュートリアル)

キーの入力を求められた場合は、[キーがありません]を選択します。デスクトップエクスペリエンスを選択す...

Ubuntuのバックアップ方法(4種類)のまとめ

方法1:リスピンを使用するには、次の手順に従ってください。 sudo add-apt-reposit...

アイデアがWebプロジェクトを公開した後、Tomcatサーバーがプロジェクトとそのソリューションを見つけることができません

概要プロジェクトは正常に作成され、正常にデプロイされましたが、以下に示すように、Tomcat サーバ...

MySql 組み込み関数の自習知識ポイントまとめ

文字列関数文字ascii(str)のASCIIコード値をチェックし、strが空の文字列の場合は0を返...

HTML で水平ナビゲーション構造を設定する方法

この記事では、主にリスト構造を使用して水平ナビゲーション構造を設定する 2 つの方法を紹介します。こ...

docker run によって起動されたコンテナがハングしてデータが失われた場合の対処方法

シナリオの説明あるシステムでは、機能サービスはdocker stack deploy xxxで起動し...