環境ごとの Vue プロジェクトのパッケージ化手順の詳細な説明

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

プロジェクト開発では、プロジェクトは通常、開発バージョン、テストバージョン、プレバージョン、本番バージョンに分かれています。 Vue-cli のデフォルト環境は dev と prod のみで、これまではテスト版や Pre 版をリリースするたびにソースコード内の API アドレスを変更してパッケージ化する必要があり、非常に面倒でした。 。さまざまな環境に応じてパッケージ化できれば完璧です。インターネットでたくさんの情報を集めたので、環境に応じてプログラムをパッケージ化することができます。その方法については、しばらく様子を見てみましょう。

ステップ 1: cross-env をインストールする 私の IDE は、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 ファイルの内容をそれぞれ変更します。 変更内容は次のとおりです。 dev.env .jsファイルの内容を変更します。 変更内容は以下の通りです。開発環境はサービス プロキシを使用して構成されており、API_ROOT の前の API は構成されたプロキシ アドレスです。

'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"'
}

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

package.json ファイル内のスクリプト コンテンツをカスタマイズし、新しく定義されたいくつかの環境のパッケージ化プロセスを追加します。そのパラメータは前のものと同じです。調整は一貫性を保ちます。

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

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

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

"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"
 },

ステップ 5: webpackage.prod.conf.js のビルド環境パラメーター

を使用して、build/webpackage.prod.conf.js ファイルを変更し、env 定数の生成方法を調整します。

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'),

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

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

// 个性env常量的定义
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']

追加:

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

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

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

'use strict'
require('./check-versions')()
// 注释掉的代码
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 修改spinner的定义
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
//更多的其它内容，不需要做任何调整的内容 ...

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

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

推奨読書:

React での Vuex の使用例

vue 組み込み命令の使用法

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