Vueフロントエンドパッケージングの詳細なプロセス

1. パッケージ化コマンドを追加する

package.jsonに設定を追加する
npm run buildによってオンラインで公開されたコードはデバッグが容易ではない

注文：

①npm run build:dev 開発・デバッグ環境
②npm run build:prod オンラインデバッグ環境

 "build:dev": "vue-cli-service ビルド --mode dev",
    "build:prod": "vue-cli-service ビルド --mode prod"

2. パッケージ化されたコードを実行する

dist/index.html直接ダブルクリックしないでください。 dist/index.html httpコンテナで実行する必要があります: serve tomcat nginx iis今回はserveを使う

サーブをダウンロード: npm i -g serve

エラー：
エラー: EPERM: 操作は許可されていません。mkdir 'C:\Program Files\nodejs\node global\node_modules.staging'

解決策:ユーザー -> 個人ユーザー -> .npmrcファイルを削除

パッケージ化されたディレクトリを起動します: serve dist

3. パッケージ化して異なる環境変数を指定する

環境変数を追加します:

①開発：ルートディレクトリに.env.devファイルを作成する（package.jsonのモードに対応）
② オンライン: ルートディレクトリに.env.prodファイルを作成する（package.jsonのモードに対応）

変数を動的に指定する必要がある場合は、 process.env.NODE_ENVなどを使用します。

// .env.dev
##開発環境 NODE_ENV=development
## 変数は VUE_APP_ で始まります。VUE_APP_URL=http://www.dev.com

// .env.prod
##本番環境 NODE_ENV=production
VUE_APP_URL=http://www.prod.com

4. カスタムファイルをパッケージ化する

vuecliはwebpackをベースにしているwebpack
VueCli ゼロ構成
設定は不要ですvue.config.jsを指定できます。

npm run build:prodにはコメント、空白行、圧縮などが欠けています。

4.1 サードパーティのパッケージを削除する

コードの内訳:

① サードパーティパッケージ： vue elementui axiosなど
②開発コード：自分で書いたもの

サードパーティのパッケージを削除する:サードパーティが提供するcdn (無料または有料) を使用する
ステップ：

①サードパーティパッケージのcdnリソースを見つけてpublic/index.htmlに追加します。 public/index.html
② 前回のimportを削除する
vue.config.jsでサードパーティパッケージの除外を設定する

モジュール.エクスポート = {
  // ファイルアクセスの相対パスを開きます プロジェクトのルートディレクトリを介した独立したプロジェクトアクセス publicPath: './',
  // 開発時には、オンラインでマップする必要はありません --> コードのデバッグを容易にするためにコードマッピングを提供します。productionSourceMap: process.env.NODE_ENV == 'development' ? true: false,
  // webpack を設定する
  Webpack の設定: config => {
    // config---vuecli デフォルト構成Object.assign(config, {
      // 依存パッケージを除外する externals: {
        vue: 'ビュー'
      }
    })
  },
}

4.2 gzip圧縮

下載npm i -D compression-webpack-plugin

5. 梱包エラー:

エラー TypeError: 未定義のプロパティ 'tapPromise' を読み取ることができません
TypeError: 未定義のプロパティ 'tapPromise' を読み取ることができません
エラーの原因:スキャフォールディング構成 gzip パッケージはこのバージョンをサポートしていません
解決策: npm install [email protected] --save-dev を使用します。
vue.config.jsで設定する

パッケージ化により、gz で終わるファイルが生成されます。

CompressionWebpackPlugin = require('compression-webpack-plugin') を設定します。

Webpack の設定: config => {
    プラグイン = [
      新しい圧縮Webpackプラグイン({
        // 圧縮アルゴリズム: 'gzip',
        // 圧縮ファイルの一致テスト: /\.js$|\.css$/,
        // 圧縮しきい値が 10k より大きい場合: 10240 
      })
    ]
    process.env.NODE_ENV == 'production'の場合{
      config.mode = "プロダクション"
      config.plugins = [...config.plugins, ...plugins]
    } それ以外 {
      config.mode = '開発'
    }
  },

ブラウザビュー:

リクエストヘッダー: Accept-Encoding: gzip, deflate, br
レスポンスヘッダー: Content-Encoding: gzip

パッケージ展開モード:

ハッシュ: パッケージ化後、distはhttpコンテナ内で直接実行されます。これはオンラインと一貫性があります。

履歴:パッケージ化後、スキャフォールディングの更新では404は発生しませんが、オンラインでは404が発生します。
解決策:フロントエンドのコードはバックエンドと一緒にデプロイする必要があり、バックエンドはフロントエンドへのジャンプを担当します。

Vue フロントエンドのパッケージ化の詳細なプロセスに関するこの記事はこれで終わりです。Vue フロントエンドのパッケージ化の詳細なプロセスに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: