環境ごとに Vue プロジェクトをパッケージ化する方法

今回は、Vue プロジェクトを環境ごとにパッケージ化する方法を説明します。Vue プロジェクトを環境ごとにパッケージ化する際の 注意事項 について、実際のケースを見てみましょう。

ステップ 1: クロス環境をインストールする

プロジェクト ディレクトリで次のコマンドを実行して、cross-env をインストールします。IDE のターミナル ウィンドウで直接実行することもできます。また、Windows CMD または Linux ターミナルからプロジェクトのルート ディレクトリに移動して、次のコマンド。

npm i --save-dev cross-env

ステップ 2: 各環境のパラメータを変更する

test.env.js と pre.env.js を config/ ディレクトリに追加します。 prod.env.js の内容を変更します。 変更内容は次のとおりです:

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 EVN_CONFIG:'"prod"',
 API_ROOT:'"/apis/v1"'
}

test.env.js ファイルと pre.env.js ファイルの内容をそれぞれ学習して変更します。 変更された内容は次のとおりです:

'use strict'
module.exports = {
 NODE_ENV: '"testing"',
 EVN_CONFIG:'"test"',
 API_ROOT:'"/test/apis/train"'
}
'use strict'
module.exports = {
 NODE_ENV: '"presentation"',
 EVN_CONFIG:'"pre"',
 API_ROOT:'"/pre/apis/train"'
}

dev.env.js ファイルの内容を変更します。 変更内容は以下のとおりです。開発環境はサービス プロキシを使用して構成されており、API_ROOT の前の API は構成されたプロキシ アドレスです。

りー

ステップ 3: プロジェクトの package.json ファイルを変更する

package.json ファイル内のスクリプト コンテンツをパーソナライズし、環境用に新しく定義されたいくつかのパッケージング プロセスを追加します。パラメータは以前の調整と一致します。

りー

ここでは、NODE_ENV を運用環境に設定するのが最善です。これは、運用環境の判断は utils.js で 1 回だけ行われ、個人的なテストは各環境の API パラメーターに影響を与えないためです。 ##ステップ 4: config/index.js を変更する

config/index.js ファイル内のビルドパラメータを変更します。ここでのパラメータは build/webpackage.prod.conf.js

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 VN_CONFIG: '"dev"',
 API_ROOT: '"api/apis/v1"'
})

で使用されます。

ステップ 5: webpackage.prod.conf.js でビルド環境パラメーターを使用する

build/webpackage.prod.conf.js ファイルを変更し、env

定数の生成方法を調整します。 りー

ステップ 6: build/build.js を調整する

process.env.NODE_ENVの割り当てを削除し、スピナーの定義を修正 調整した内容は以下の通りです:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
  "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
 },

追加:

vue2+webpackを環境別にパッケージ化する方法

今年は vue2 のシングルページ アプリケーション プロジェクトに携わる機会があり、開発から立ち上げまで 2 つの環境を経験しました。テスト環境と正式環境の両方でnpm runを実行しています。 建てる。この 2 つの環境の変数は現状では異なっており、パッケージ化する際に毎回変数を変更するのは少し面倒に感じます。その後、同僚のプロジェクトで、環境に応じて異なるコマンドを実行し、異なるパッケージを取得したことを紹介しました。たとえば、テスト環境 npm テストを実行し、正式な環境 npm でビルドを実行します。

ファイルconfig/prod.env.jsでの設定が必要です

build:{
  // Template for index.html
  // 添加test pre prod 三处环境的配制
  prodEnv: require('./prod.env'),
  preEnv: require('./pre.env'),
  testEnv: require('./test.env'),
  //下面为原本的内容，不需要做任何个性
  index:path.resolve(dirname,'../dist/index.html'),

npm は、現在実行中のスクリプト (事前テスト、テスト、事後テストなど) の名前を返す npm_lifecycle_event 変数を提供します。したがって、この変数を使用して、同じスクリプト ファイル内に異なる npm script コマンドのコードを記述することができます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

webpack の自動モバイル ビルド rem メソッドの詳細な説明

angular2 モジュールと共有モジュールの使用方法の詳細な紹介

以上が環境ごとに Vue プロジェクトをパッケージ化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。