環境ごとに Vue プロジェクトをパッケージ化する方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-05-02 14:23:36

オリジナル

1271 人が閲覧しました

今回は、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 サイトの他の関連記事に注目してください。

推奨書籍:

Angular2 で Dom を使用する方法

React での Vuex メソッドの使用の詳細な説明

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